引导 .col-md-* 错误答案

【问题标题】：Bootstrap .col-md-* error引导 .col-md-* 错误
【发布时间】：2014-08-20 09:08:52
【问题描述】：

<div class="container">
    <div class="companies">
        <h3>Parteners &#38; Sponsor</h3>
        <p>Here is a quick view at the companies that we trust and help us.</p>
        <div class="sponsor">
            <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
            <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
            <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
       </div>
    </div>
</div> <!-- end of Parteners & Sponsors section -->


.sp {
    border: 1px solid red;
    display: inline-block;
}

.sponsor {
    text-align: center;
    border: 7px solid green;
}

.companies {
    border: 7px solid yellow;
}

从 CSS 样式中可以看出，.companies 类有一个 7 像素的绿色边框，.sponsor - 一个 7 像素的黄色边框。 .sp 有一个红色边框，以便您可以看到它。

.sp 应该像在 image2 中一样包裹在一个绿色容器中（在 image2 中，我不使用引导程序中的 .col-md-4 类），而是显示为image1（我使用 .col-md-4 的地方）。 .col-md-* 或 bootstrap 中的其他类可以在文档的其他部分完美运行。

【问题讨论】：

你错过了排课？
谢谢。以前我将整个 .companies 类包装在一个 .row 中，现在只包装了三个 .sp div。解决了。
@Petah 将其发布为答案。
@Gofilord 我在平板电脑上，所以我无法提供完整的答案：P

标签： html css twitter-bootstrap

【解决方案1】：

<div class="container">
    <div class="companies">
        <h3>Parteners &#38; Sponsor</h3>
        <p>Here is a quick view at the companies that we trust and help us.</p>

        <div class="sponsor">
            <div class="row">
                <div class="col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
                <div class="col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
                <div class="col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
            </div>
        </div>
    </div>
</div> <!-- end of Parteners & Sponsors section -->

这是应该的。感谢大家的解答。

【讨论】：

【解决方案2】：

您应该增加“companies” div 的大小，以便“sponsor” div 适合。“sp” div 适合“sponsor” div。这应该可以解决边框问题。

【讨论】：

没有。 .companies 高度设置为自动。将 .sp div 包装在 .row 类中 - 这解决了问题。 funkyimg.com/i/K4k8.png Mulțumesc pentru răspuns oricum :)

【解决方案3】：

您的问题是由称为 div collapsing 的东西引起的，这意味着 div 的高度减少到零，原因是具有 col-md-4 类的 div 的浮动，它们有一个 float:left;样式，这就是父级崩溃的原因。

解决方案是在这些 div 之后清除浮动，因此您的 html 将是：

<div class="container">
    <div class="companies">
        <h3>Parteners &#38; Sponsor</h3>
        <p>Here is a quick view at the companies that we trust and help us.</p>
        <div class="sponsor">
            <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
            <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
            <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
            <br style="clear:both;" />
       </div>
    </div>
</div> <!-- end of Parteners & Sponsors section -->

希望这会有所帮助。

【讨论】：

可能是这样，但是将 .sp div 包装成一行可以正常工作。谢谢。

【解决方案4】：

试试这个：css 没有变化只有 HTML 中的两个变化你可以得到你想要的精确输出。

<div class="container">
  <div class="row">
    <div class="companies">
        <h3>Parteners &#38; Sponsor</h3>
        <p>Here is a quick view at the companies that we trust and help us.</p>
        <div class="sponsor clearfix">
            <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
            <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
            <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
       </div>
    </div>
</div>

【讨论】：

【解决方案5】：

为什么不“政治正确”呢？

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="companies row">
                <div class="col-md-12">
                    <div class="sponsor row">
                        <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
                        <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
                        <div class="sp col-md-4"><a href="#"><img src="img/sponsors/bt.png"></a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> <!-- end of Parteners & Sponsors section -->

【讨论】：