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

Question

这方面有很多问题，但他们似乎都只想要左边一个项目，一个右边一个项目，或者一个按钮组。所有这些都很简单。

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

但是不是右侧组中的两个按钮，而是两个其他元素 - 例如两个 div，还是两个 h3？

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

编辑

@Harinder88 提供了这个解决方案，如您所见，它确实按照我的要求做，所以我接受了作为答案，因为我认为在绝大多数用例中，这就是大多数人试图实现的目标。

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

Answer 1

你可以使用 pull-right 来对齐 div right 和 pull-left 来对齐 div on left side 。 如果你想做进一步的分区，你可以再次使用相同的东西。

<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

我设法通过用跨度替换按钮组和按钮来解决这个问题，然后它工作正常。所有内容都对齐在一条线上，向左拉 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>