Question

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

Object {Dry Aged Ribeye(medium): "1"
     , Dry Aged Ribeye(rare): "1"
     , Dry Aged Ribeye(well): "1"
     , favorite_tables: "{"dc76e9f0c0006e8f919e0c515c66dbba3982f785":[]}"
}

Answer 1

最有可能的是，您的浏览器调整大小不会超出“大型”列定义的媒体查询宽度。尝试使用xs或sm来找到所需的休息时间。

onload

上述内容总会打破2列。

下面的链接显示了底层媒体查询的详细信息。对于这个答案，相关的休息时间是：

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

链接：http://getbootstrap.com/css/#grid-media-queries

Answer 2

您必须看到Bootstrap网格系统的各个方面如何在具有便捷表的多个设备上工作。 Grid options

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

col-xs - * 用于额外的小型设备电话（＆lt; 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

2 个答案: