Bootstrap 3 保证金问题答案

【问题标题】：Bootstrap 3 margin issueBootstrap 3 保证金问题
【发布时间】：2014-04-21 20:41:10
【问题描述】：

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

问题是 col-md-4 和 col-md-8 不在一条线上。

谢谢！

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

【问题讨论】：

标签： twitter-bootstrap margin

【解决方案1】：

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

【讨论】：