Question

我使用Twitter Bootstrap进行网站布局。我将所有row-fluid用于行，而我的所有跨度在求和时均等于12。但我不断遇到div之间“泄漏”内容的问题，而不像流体网格示例那样堆叠。我按照建议将<HEAD>包括在内。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

例如：

<div class="row-fluid">
<div class="span8 offset1 categoryLabel" id="category"></div>
<div class="span1 sortby">ALPHABETIC</div>
<div class="span1 sortby">POPULARITY</div>
<div class="span1 sortby">DATE</div>
</div>                                              
<div class="row-fluid">

在更大的分辨率上布局很好。但是一旦我缩小了浏览器的大小，“字母，流行度和日期”都会相互渗透，所以看起来像是“Alphularidate”。他们没有按预期“堆叠”。

Answer 1

这是因为span1列对于列标题而言不够宽。请参阅此示例，其中我将文字缩小并将列http://jsfiddle.net/panchroma/QKZzZ/

着色

body{
font-size:50%;
}
.span1, .span8{
background-color:#ccc;
}

干杯！

Answer 2

至少在你的问题中，你没有定义一个容器div来包装你的行。容器div是bootstrap脚手架的关键部分，如果缺少，将导致各种奇怪的行为。

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span8 offset1 categoryLabel" id="category"></div>
    <div class="span1 sortby">ALPHABETIC</div>
    <div class="span1 sortby">POPULARITY</div>
    <div class="span1 sortby">DATE</div>
  </div><!-- end row -->
  <!-- more rows here -->
</div><!-- end container -->

您可以检查或下载此流畅的Twitter Bootstrap示例作为参考： http://twitter.github.com/bootstrap/examples/fluid.html

Answer 3

将bootstrap cdn链接更新为2.2，它现在可以正常工作。

Bootstrap - 为什么我的div内容合并浏览器调整大小？

3 个答案: