Question

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

我想让第3和第4口井在井1和2井下排成一行。我不介意在井的顶部和底部之间存在的空间。

这是我的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">

如何水平排列列？

1 个答案: