Question

我正在修改一个基于Bootstrap构建的WordPress主题，并希望获得将出现在一个 div中的内容，以便分布在两个均匀的高度上列。可以通过Bootstrap框架或CSS轻松完成吗？感谢。

Answer 1

你可以做的是使用一些新的CSS3元素。

请注意，这仅适用于最新的浏览器，在大多数情况下需要浏览器前缀

div {
  -webkit-column-count: 2;/* Chrome, Safari, Opera */
  -moz-column-count: 2;/* Firefox */
  column-count: 2;
}

<div>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
  ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue
  duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

如您所见，您必须针对webkit和moz拨打特定于浏览器的电话。设置宽度和其他此类信息有很多额外的功能，因此阅读一些文档将非常有用。

以下是一些关于如何使用及其支持位置的链接

了解详情：MDN

浏览器支持：Caniuse

Answer 2

这是唯一可用的bootstrap解决方案：

<强> LIVE DEMO

<div class="row">
  <div class="col-md-6 col-xs-6 col-lg-6 lol1">somethink</div>
  <div class="col-md-6 col-xs-6 col-lg-6 lol2">somethink</div>
</div>

如果div的内容是文本，则无法在两列中显示此内容，则必须在此容器中使用其他div's。

一个DIV显示为两列

2 个答案: