Question

如何在网页上分为两行三列的六个div？我用bootstarp尝试了以下代码，但div没有出现在一列中而是在一列中而不是在一列之后

<div class="row">
  <div class="span4" id="chart_1"></div>
  <div class="span4" id="chart_2"></div>
  <div class="span4" id="chart_3"></div>
</div>

小提琴： https://jsfiddle.net/r2qepmk0/3/

修改当我向我的div添加col-xs-4类时，我的d3图表停止渲染是否有另一种可能的解决方案呢？

Answer 1

使用{{1}}查看小提琴https://jsfiddle.net/r2qepmk0/1/

你想要什么w3fools，但这个链接很好地解释了http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

Answer 2

当您的小提琴包含bootstrap 2.* css时，您正在使用bootstrap 3.3.5语法。将列语法更改为：

<div class="row">
  <div class="col-xs-4" id="chart_1">23</div>
  <div class="col-xs-4" id="chart_2">45</div>
  <div class="col-xs-4" id="chart_3">34</div>
</div>

它应该适合你。有关当前版本的Bootstrap，请参阅文档。

您的更新JSFiddle

Answer 3

首先，一个建议是将您的布局包装在bootstrap容器类中。默认情况下，行类具有type左右边距，而容器类具有左右填充-15px。它们意味着串联工作并将您的内容冲洗到容器外部。

其次，使用15px语法。

col-

https://jsfiddle.net/0vu83eru/1/

Answer 4

您只需要将<div>包裹在<div class="col-xs-4">中，一切都应该是好的。

目前，bootstrap类正在干扰D3 js应用的样式，这会产生在你的小提琴中看到的结果。您还应该删除class="span4"，因为如前所述，这是bootstrap 2.x版，而您使用的是3.x.

Answer 5

你可以通过这样的方式将六个div分为两行和三列：

<div class="row">
  <div class="span4" id="chart_1"></div>
  <div class="span4" id="chart_2"></div>
  <div class="span4" id="chart_3"></div>
</div>
<div class="row">
  <div class="span4" id="chart_4"></div>
  <div class="span4" id="chart_5"></div>
  <div class="span4" id="chart_6"></div>
</div>

请记住，您可以使用课程row-fluid在网页中获得更大的灵活性

如何使用bootstrap以三行为单位在网页上放置div

5 个答案: