부트 스트랩 3 패널 바닥 글 (왼쪽에서 1 개, 오른쪽에서 2 개)이 모두 같은 바닥 글 행에 있습니까?

Question

이것에 관해 많은 질문이 있지만, 그것들은 모두 하나의 항목을 왼쪽에, 하나는 단추 그룹으로 만 원하는 것처럼 보입니다. 그것들 모두는 간단합니다. 는

어떻게 오른쪽에 대신 그룹에있는 두 개의 버튼이 bootply

하지만 유사 달성 할 수

, 다른 두 요소 -이 div의, 또는 예를 들어 두 개의 H3?

이 두 요소는 항상 수직으로 겹쳐서 표시되며 바닥 글의 오른쪽에 수평으로 정렬되지 않습니다.

편집

Harinder88 당신이 볼 수 있듯이, 내가 질문하고 내가 사용하는 대부분의 경우에 생각하는 내가 대답으로 받아 무엇을 하는가,이 솔루션을 제공 @, 이것은 무엇이다 대부분의 사람들은 성취하려고 노력하고 있습니다.

그러나 텍스트가 열이 너무 긴 경우, 그것은 포장됩니다 것을 볼 수 있습니다 이제 모든 것을 한 줄에 없습니다. 그러나 나는 이것이 반응 형 디자인의 타협이라고 생각합니다. 실제 사용 사례에서는 마지막 항목을 줄 바꿈 할 수 없으므로이를 해결하기 위해 고정 너비를 지정해야합니다. Thanks @ Harinder88.

Answer 1

지금은 왼쪽에서 수평과 오른쪽이 방법으로 u는 당신의 시간에 대한 그들 중 하나

<div class="panel panel-default"> 
    <div class="panel-heading"> 
    <div class="panel-title"> 
     <ul class="list-inline"> 
     <li class="col-xs-12"> 
      <div class="pull-right"> 
      <div class="row"> 
       <div class="col-md-6 col-xs-6"> 
       <p>Left side with col</p> 
       </div> 
       <div class="col-md-6 col-xs-6"> 
       <p> Right side with col</p> 
       </div> 
      </div> 
      </div> 
      <div class="pull-left"> 
      <div class="pull-left">Left side with pull</div> 
      <div class="pull-right">Right side with pull</div> 
      </div> 

     </li> 
     </ul> 
    </div> 
    </div> 
    <div class="panel-body">Content here..</div> 
</div> 

<hr> 

Answer 2

오른쪽 정렬에는 당기기 오른쪽을 사용할 수 있고 왼쪽에는 정렬 div에 대해 당겨 받기를 사용할 수 있습니다. 다른 파티션을 사용하려면 같은 것을 다시 사용할 수 있습니다.

<div class="panel panel-default"> 
    <div class="panel-heading"> 
    <div class="panel-title"> 
     <ul class="list-inline"> 
     <li class="col-xs-12"> 
      <div class="pull-right"> 
      <button class="btn btn-default">ON</button> 
      <button class="btn btn-primary active">OFF</button> 
      </div> 
      <div class="pull-left"> 
      <h4> 
       Fotter (you can use anything here button code or link tag , you can remove hr tag and use anything you want) 
      </h4> 
      </div> 

     </li> 
     </ul> 
    </div> 
    </div> 
    <div class="panel-body">Content here..</div> 
</div> 

Answer 3

버튼 그룹과 버튼을 스팬으로 바꾸면 문제를 해결할 수 있습니다. 모든 것이 한 줄에 정렬되고, 왼쪽으로 한 개, 오른쪽으로 당겨 진 두 개의 항목이 있습니다.

<div class="panel-footer"> 
    <div class="panel-title"> 
     <ul class="list-inline"> 
      <li class="col-xs-12"> 
       <span class="pull-right"> 
        <span>Recording - Last updated at x</span> 
        <span class="trail-status">PUBLISHED</span> 
       </span> 
       <h5>x comments 
       </h5> 
      </li> 
     </ul> 
    </div> 
    <div class="clearfix"> 
    </div>   
</div>