어떻게 다음 패널을 정렬 할 수 있습니까?

Question

다음은 로그인 패널의 코드입니다. 나는 그것을 바로 맞추고 싶다.

<div class="col-sm-3"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3 class="panel-title"> 
       <span class="glyphicon glyphicon-log-in"></span> 
       Log In 
      </h3> 
     </div> 
    <div class="panel-body" > 
     <form> 
      <div class="form-group"> 
       <input type="text" class="form-control" id="uid" name="uid" placeholder="Username"> 
      </div> 
      <div class="form-group"> 
       <input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password"> 
      </div> 
       <button type="submit" class="btn btn-default">Log In</button> 
     </form> 
    </div> 
</div> 

Answer 1

당신은 부모 DIV

<div class="panel panel-default right-align"> 
     <div class="panel-heading"> 
      <h3 class="panel-title"> 
       <span class="glyphicon glyphicon-log-in"></span> 
       Log In 
      </h3> 
     </div> 
     <div class="panel-body" > 
      <form> 
       <div class="form-group"> 
        <input type="text" class="form-control" id="uid" name="uid" placeholder="Username"> 
       </div> 
       <div class="form-group"> 
        <input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password"> 
       </div> 
       <button type="submit" class="btn btn-default">Log In</button> 
      </form> 
     </div> 
    </div> 

을 추가로 추가 클래스 "오른쪽 정렬"을 추가 할 수 있습니다

.right-align{ 
    float: right; 
} 

귀하의 CSS 파일에

또는 문제를 더 잘 이해하기 위해 상위 div를 포함한 마크 업을 게시하십시오.

Answer 2

부트 스트랩을 사용하고있는 것 같습니다. 그렇다면 패널에 "당겨 받기 권한"또는 "텍스트 권한"클래스를 추가하고 필요에 맞는 클래스인지 확인할 수 있습니다. 또한 패널 주변의 코드로 인해 이러한 클래스의 동작 방식이 변경 될 수 있음을 기억하십시오. 자세한 내용을 제공하면 (바이올린이 도움이 될 것입니다.)이 답변에 기꺼이 대답하겠습니다.

또한이 링크 헬퍼 클래스에 대한 자세한 정보를 확인할 수 있습니다 https://getbootstrap.com/docs/3.3/css/#helper-classes이