0

我已经使用嵌套流体网格在 twitter bootstrap 中启用了响应式功能。在小型移动设备上查看时，每个跨度都是堆叠的。但是，我想保持“主要内容”不堆叠并以水平布局显示。我试过 display:inline-block; 和 min-width 但两者都不起作用。有什么建议吗？谢谢你。

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span9" id="maincontent">
      <div class="container-fluid">
       <div class="row-fluid">
         <div class="span2">2</div>
         <div class="span8">8</div>
         <div class="span2">2</div>
       </div>
      </div>
    </div>
    <div class="span3" id="sidebar">
      <!-- sidebar elements go here -->
    </div>
  </div>
</div>
4

1 回答 1

0

试一试：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span9" id="maincontent">
            <div class="row">
                <div class="span2" style="float: left; width: 15%;">2</div>
                <div class="span8" style="float: left; width: 65%;">8</div>
                <div class="span2" style="float: left; width: 15%;">2</div>
            </div>
        </div>
        <div class="span3" id="sidebar">
            <!-- sidebar elements go here -->
            sidebar
        </div>
    </div>
</div>

您需要调整和使用 % 以满足您的需求，并最终将这些内联样式移出到样式表中。您可能需要对它们打 !important 以防止它们被流畅的 twitter 引导类覆盖。它们与您的设置堆叠的原因是，尽管您使用了非流体容器/行类，但流体样式接管了，并将它们更改为浮动：无，宽度：100%；显示：块 div。

于 2013-06-02T18:31:44.403 回答