如何水平对齐列？

Question

我有一个bootstrap 3页面上有4个井。每口井都有不同的数据量，这会导致布局看起来相当糟糕。

我想让第三口井和第四口井排在一口井和二口井下，我不介意井顶和井底之间的空间。

这是我的HTML：

<div class="container-fluid">
    <div class="row-fluid">

        <div class="col-sm-6">
            <div class="well well-sm">
                <div class="form-horizontal">
                    <fieldset>
                        <legend class="well-legend">Well 1</legend>
                        <p>Well 1 Content</p>
                        <p>Well 1 Content</p>
                        <p>Well 1 Content</p>
                        <p>Well 1 Content</p>
                        <p>Well 1 Content</p>
                        <p>Well 1 Content</p>
                        <p>Well 1 Content</p>

                    </fieldset>

                </div>
            </div>
        </div>


        <div class="col-sm-6">
            <div class="well well-sm">
                <div class="form-horizontal">
                    <fieldset>
                        <legend class="well-legend">Well 2</legend>
                        <p>Well 2 Content</p>
                        <p>Well 2 Content</p>
                    </fieldset>
                </div>
            </div>
        </div>
    </div>


    <div class="row-fluid">
        <div class="col-sm-10">
            <div class="col-sm-6">
                <div class="well well-sm">
                    <div class="form-horizontal">
                        <fieldset>
                            <legend class="well-legend">Well 3</legend>
                            <p>Well 3 Content</p>
                            <p>Well 3 Content</p>
                            <p>Well 3 Content</p>
                            <p>Well 3 Content</p>
                            <p>Well 3 Content</p>
                            <p>Well 3 Content</p>
                            <p>Well 3 Content</p>
                            <p>Well 3 Content</p>
                            <p>Well 3 Content</p>
                            <p>Well 3 Content</p>
                        </fieldset>
                    </div>
                </div>
            </div>


            <div class="col-sm-6">
                <div class="well well-sm">
                    <div class="form-horizontal">
                        <fieldset>
                            <legend class="well-legend">Well 4</legend>
                            Well 4 Content
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Bootply Link

Answer 1

如果这是你想要的，那么我认为你可能需要改变你正在使用的流体容器，只需使用：

<div class="container">
    <div class="row">