1

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

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

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

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

编辑

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

在此处输入图像描述

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

4

3 回答 3

1

Now see this example i aligned 2 items horizontal in left and right with 2 methods u can use any 1 of them

<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>
于 2016-09-06T00:39:43.117 回答
0

您可以使用 pull-right 对齐 div 右侧和 pull-left 对齐左侧的 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>
于 2016-09-06T00:25:42.663 回答
0

我设法通过用跨度替换按钮组和按钮来解决这个问题，然后它工作正常。一切都对齐在一条线上，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>
于 2016-09-06T00:32:57.577 回答