Bootstrap 3保证金问题

时间:2014-03-16 18:19:24

标签: twitter-bootstrap margin

我真的很感激这方面的一些帮助。我有这个保证金问题,无法弄清楚。它可能非常简单,但我没有看到它。

问题是col-md-4和col-md-8不一致。

Here's an example on JSFiddle

谢谢!

<div class="container">
    <div class="row">
        <div class="col-md-4  text-center">
            <div class="col-md-12">
                <div class="cta">
                    <h3>Mek 's a Brew Lad</h3>
                    <p>A pint 'o mild. Tell thi summat </p>
                </div><!--end cta -->
            </div><!-- end col12 -->

            <div class="col-md-12">
                <div class="twitter">
                    <h3>Mek 's a Brew Lad</h3>
                    <p>A pint 'o mild. Tell thi summat </p>
                </div><!--end twitter -->
            </div><!-- end col12 -->                   
        </div><!-- end col4 -->

        <div class="col-md-8">
            <img src="img/bar.jpg" alt="Bar">
        </div><!-- end col8 -->              
    </div><!-- end row -->
</div><!-- end container -->`[1]

1 个答案:

答案 0 :(得分:0)

Include col-md-12 at the top to wrap both divs .
<div class="container">
        <div class="row">
            <div class=col-md-12><!-- add this  -->
            <div class="col-md-4  text-center">
                <div class="col-md-12">
                    <div class="cta">
                        <h3>Mek 's a Brew Lad</h3>
                        <p>A pint 'o mild. Tell thi summat </p>
                    </div><!--end cta -->
                </div><!-- end col12 -->

                <div class="col-md-12">
                    <div class="twitter">
                        <h3>Mek 's a Brew Lad</h3>
                        <p>A pint 'o mild. Tell thi summat </p>
                    </div><!--end twitter -->
                </div><!-- end col12 -->                   
            </div><!-- end col4 -->

            <div class="col-md-8">
                <img src="http://placeimg.com/777/622/any" alt="Bar">
            </div><!-- end col8 -->


                </div><!-- add this  -->
        </div><!-- end row -->
    </div><!-- end container -->