Bootstrap 3 水平对齐两个 div

Question

我打算将它们水平对齐到两个 divs（包含 h3 标签的那些），但每次我调整浏览器大小时，另一个 div 会继续堆叠在第一个 div。这是代码的一部分。我哪里做错了？

<section id="main-content" " ng-controller="studCtrl">
      <section class="wrapper">
        <h3><i class="fa fa-angle-right"></i>Administrative Module</h3>
          <div class="row mt">
              <div class="col-lg-12">
                <div class="content-panel">
                    <div class="container-fixed">
                        <div class="row">
                                <div class="col-lg-6 ">
                                    <h3>Lost and Found List</h3>
                                </div>
                                <div class="col-lg-6">
                                    <h3 class="text-right">Button here</h3>
                                </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                <thead>
                                  <tr >
                                      ...
                                  </tr>
                                 </thead>
                                 <tbody>
                                   ...
                                 </tbody>
                            </table>
                        </div>
                    </div>
                 </div>

               </div><!-- /content-panel -->
           </div><!-- /col-lg-12 -->
          </div><!--/row mt -->

         </section><!--/wrapper -->
  </section><!-- /MAIN CONTENT -->

Answer 1

很可能是您的浏览器调整大小没有超出 'large' 列定义的媒体查询宽度。尝试使用 xs 或 sm 来找到所需的中断。

<div class="col-xs-6"> ... </div>

以上总是会打破 2 列。

下面的 link 显示了底层媒体查询的详细信息。对于这个答案，相关的中断是：[=13=]

Prefix      Break
.col-xs-    auto
.col-sm-    ~372px/col-6 (750px for container)
.col-md-    ~486px/col-6 (970px for container)
.col-lg-    ~582px/col-6 (1170px for container)

Link: http://getbootstrap.com/css/#grid-media-queries

Answer 2

您必须了解 Bootstrap 网格系统的各个方面如何使用方便的 table 跨多个设备工作。 Grid options

网格 classes 适用于屏幕宽度 大于或等于 断点大小的设备，并覆盖针对较小设备的网格 classes .因此，例如将任何 .col-md-* class 应用于元素不仅会影响其在中型设备上的样式，如果 .col-lg-* class 不存在，也会影响大型设备。

col-xs-* 适用于超小型设备手机 (<768px)
col-sm-* 适用于小型设备平板电脑 (≥768px)
col-md-* 适用于中型设备台式机 (≥992px)
col-lg-* 大型设备桌面（≥1200px）

因此，您必须将代码更改为以下内容：

<div class="col-md-6">
   <h3>Lost and Found List</h3>
</div>
<div class="col-md-6">
   <h3 class="text-right">Button here</h3>
</div>

或者，如果您希望两个 div 始终水平放置，即使对于移动设备也是如此。

<div class="col-xs-6">
   <h3>Lost and Found List</h3>
</div>
<div class="col-xs-6">
   <h3 class="text-right">Button here</h3>
</div>

Bootstrap 3 水平对齐两个 div

Bootstrap 3 Aligning Two Divs Horizontally

html

alignment

twitter-bootstrap