Question

我已使用嵌套流体网格在twitter bootstrap中启用了响应功能。在小型移动设备上观看时，每个跨度都是堆叠的。但是，我想保留＆＃34; maincontent＆＃34;未堆叠并以水平布局显示。我试过显示：inline-block;和最小宽度，但都没有工作。有什么建议？谢谢。

<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>

Answer 1

给这样的东西一个镜头：

<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>

您需要调整并使用％来满足您的需求，并最终将这些内联样式移到样式表中。您可能需要对它们进行重要操作，以防止它们被流畅的Twitter引导程序类覆盖。它们与您的设置堆叠的原因是，尽管使用了非流体容器/行类，流体样式仍然接管，并将它们更改为float：none，width：100％; display：block divs。

Bootstrap响应：如何修复无响应元素？

1 个答案: