Bootstrap 3 个面板页脚，其中 1 个元素向左拉，2 个元素向右拉，都在同一页脚行上 - 怎么样？

Question

这方面的问题很多，不过好像都是想要左一右一，或者按钮组。所有这些都很简单。

我怎样才能实现类似这个bootply

但是 而不是右侧组中的两个按钮，而是另外两个元素 - 例如两个 div，或者两个 h3？

无论我怎么尝试，这 2 个元素最终总是垂直堆叠，而不是在页脚右侧水平对齐。

编辑

@Harinder88 提供了这个解决方案，如您所见，它确实满足了我的要求，所以我接受了我认为在绝大多数用例中的答案，这就是大多数人正在努力实现的目标.

但是，您可以看到，如果文本对于列来说太长，它会被换行，现在所有内容都不会在一行中。但我承认这是响应式设计的妥协。恰好在我的实际用例中，最后一个项目不能被包裹，所以我只需要给它一个固定的宽度来解决这个问题。谢谢@Harinder88。

Answer 1

您可以使用向右拉使 div 右对齐，向左拉使 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 2

我设法通过用 span 替换按钮组和按钮来解决这个问题，然后它工作正常。所有内容都对齐在一条线上，1 项向左拉，2 项向右拉。

<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>

Answer 3

现在看这个例子，我用 2 种方法左右水平对齐了 2 个项目，你可以使用其中的任何一种

<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>

Bootstrap 3 个面板页脚，其中 1 个元素向左拉，2 个元素向右拉，都在同一页脚行上 - 怎么样？

Bootstrap 3 panel footer with 1 element pulled left and 2 elements pulled right, all on same footer row - how?

css

twitter-bootstrap

footer

right-align