Question

伙计我在此设置中有三个divs：我不确定您是否熟悉此bootstrap css但我应该尝试一下：

<div class="row-fluid">
   <div class="span4"> A graph here </div>
   <div class="span4"> A graph here </div>
   <div class="span4"> A graph here </div>
</div>

<div class="row-fluid">
   <div class="span4"> Another graph here </div>
   <div class="span4"> Another graph here </div>
   <div class="span4"> Another graph here </div>
</div>

span4将使三个div按比例适合整个页面。所以位置是三个图形将彼此并排放置到顶部div并且在它下面另外三个图形。

我的问题是，当我调整浏览器窗口的大小时，图形将在垂直方向上相互叠加，就像它们现在拥有自己的容器一样。如何制作这些图表，保持并排的位置？

Answer 1

您可以执行以下操作：

<div class="row-fluid">
   <div class="third"> A graph here </div>
   <div class="third"> A graph here </div>
   <div class="third"> A graph here </div>
</div>

<div class="row-fluid">
   <div class="third"> Another graph here </div>
   <div class="third"> Another graph here </div>
   <div class="third"> Another graph here </div>
</div>

和css：

.third{
float:left;
width:33.33%;
}

Answer 2

你需要把它们放在像这样的div中 -

<div class="row">
  <div class="col-xs-4">
    graph1
  </div>
  <div class="col-xs-4">
    graph2
  </div>
  <div class="col-xs-4">
    graph3
  </div>
</div>

每行div应最多加12，以完全填充该行。 col-X在div class=上的位置表示您的div将垂直堆叠而不是水平堆叠。所以如果你有col-sm-4你的div会在引导程序上垂直堆叠＆＃34; small＆＃34;分辨率媒体查询。通过将它们设置为col-xs-4，每行将在小分辨率上保持水平。

另请查看这些资源 Bootstrap official documentation Understanding BootStrap grid system for beginners

调整浏览器大小时如何使div不中断

2 个答案: