0

我正在使用 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”。他们没有像预期的那样“堆叠”。

4

3 回答 3

0

这是因为 span1 列对于您的列标题来说不够宽。请参阅此示例，其中我将文本缩小并为列着色http://jsfiddle.net/panchroma/QKZzZ/ 

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

干杯!

于 2013-01-27T18:58:32.640 回答
0

至少在您的问题中，您还没有定义一个容器 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

于 2013-01-27T19:01:35.190 回答
-1

将引导 cdn 链接更新到 2.2，它现在可以正常工作。

于 2013-01-27T21:49:05.430 回答