Bootstrap .col-md- *错误

Question

<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 类有一个7px的绿色边框， .sponsor - 一个7px的黄色边框。 .sp 只有一个红色边框，以便您可以看到它。

.sp 应该包装在绿色容器中，就像在image2中一样（在image2中我不使用bootstrap中的.col-md-4类），而是显示在image1（我使用的是.col-md-4）。 .col-md- *或bootstrap中的其他类在文档的其他部分完美地工作。

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

这应该是这样的。感谢大家的回答。

Answer 2

你应该增加＆＃34;公司＆＃34; div大小所以＆＃34;赞助商＆＃34; div适合于...赞助商＆＃34;赞助商＆＃34; div＆＃34; sp＆＃34; div适合。这应解决边界问题。

Answer 3

你的问题是由div崩溃引起的，这意味着div的高度减少为零，原因是具有类col-md-4的div的浮动，它们有一个{ {1}}样式，这就是父母崩溃的原因。

解决方法是在那些div之后清除浮动，所以你的html将是：

float:left;

希望这有帮助。

Answer 4

为什么不“政治正确”？

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

Answer 5

试试这个： 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>