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

Question

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

我怎样才能实现类似的 bootply

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

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

编辑

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

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

Answer 1

现在看这个例子，我用两种方法在左右水平对齐了 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>