Twitter-Bootstrap 中的响应井？答案

【问题标题】：Responsive wells in Twitter-Bootstrap?Twitter-Bootstrap 中的响应井？
【发布时间】：2013-03-20 03:42:36
【问题描述】：

鉴于这种包装：

<div class="container">
    <div class="row-fluid swell">
    <div class="span9">
        hello world
    </div>
</div>
</div>

使用这种样式（在 twitter-bootstrap 上）：

.swell {
    background-color: #F5F5F5;
    border: 1px solid #E3E3E3;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
    margin-bottom: 20px;
    min-height: 20px;
    padding: 19px;
}

如何获得优雅的响应？

(Plnkr 可以看到网站正在运行；拖动浏览器窗口的一侧以查看问题)

【问题讨论】：

标签： css html twitter-bootstrap responsive-design

【解决方案1】：

不要让 div 既是行又是井：

<div class="row-fluid">
  <div class="swell">
    <div class="span9">
     hello world
    </div>
  </div>
</div>

【讨论】：

谢谢，但这使得膨胀下方的区域（许多跨度 + 嵌套的行流体）失去了 well 颜色和边框。有什么建议吗？
没有看到你的代码。我猜你需要相应地调整你的风格声明。不过，我的建议是成立的。不要在 Bootstrap 中组合功能性 div。

【解决方案2】：

想出了解决办法：

<div class="swell">
    <div class="row-fluid">
        <div class="span9">
            Hello world!
        </div>
    </div>
</div>

【讨论】：