Question

您好我是第一次在网络应用程序上使用Twitter bootstrap，我想在一个高达6-8的页面上创建，在大屏幕上占据6列。我已设法做到这一点我只有一个问题。

例如，如果右边的井的高度高于左边的井，则很多空间都没有填充。这就是我的意思：

enter image description here

为了解决这个问题，我认为将井容器的margin-top和margin-bottom设置为0很简单，但它不起作用。这是我的html结构：

        <section class="col-sm-6">
            <div class="well overflow">
                <div class="col-xs-8 reset-padding-left">
                    <h5><strong>About Me</strong></h5>
                </div>
                <div class="col-xs-4 text-right reset-padding-right">
                    <a class="btn btn-primary btn-edit"><i class="fa fa-pencil"></i> Edit</a>
                </div>
                <div class="col-xs-12 content-divider"></div>
                <div class="col-xs-12 reset-padding-left">
                    <div class="col-xs-3 reset-padding-left">
                        <span>Birthday</span>
                    </div>
                    <div class="col-xs-9 reset-padding-right">
                        <p>15 November 1989</p>
                    </div>
                </div>
                <div class="col-xs-12 reset-padding-left">
                    <div class="col-xs-3 reset-padding-left">
                        <span>Gender</span>
                    </div>
                    <div class="col-xs-9 reset-padding-right">
                        <p>Male</p>
                    </div>
                </div>
                <div class="col-xs-12 reset-padding-left">
                    <div class="col-xs-3 reset-padding-left">
                        <span>Birth Place</span>
                    </div>
                    <div class="col-xs-9 reset-padding-right">
                        <p>Bacau, Romania</p>
                    </div>
                </div>
            </div>
        </section>
        <section class="col-sm-6">
            <div class="well overflow">
                <div class="col-xs-8 reset-padding-left">
                    <h5><strong>About Me</strong></h5>
                </div>
                <div class="col-xs-4 text-right reset-padding-right">
                    <a class="btn btn-primary btn-edit"><i class="fa fa-save"></i> Save</a>
                </div>
                <div class="col-xs-12 content-divider"></div>
                <div class="col-xs-12 reset-padding-left reset-padding-right">
                    <div class="col-xs-3 reset-padding-left">
                        <span>Birthday</span>
                    </div>
                    <div class="col-xs-9 col-md-3 reset-padding-right add-margin-bottom">
                        <select class="form-control">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option selected="selected">4</option>
                            <option>5</option>
                        </select>
                    </div>
                    <div class="col-xs-9  col-md-3 col-xs-offset-3 col-sm-offset-3 col-md-offset-0 col-lg-offset-0 reset-padding-right add-margin-bottom">
                        <select class="form-control">
                            <option>Dec</option>
                            <option selected="selected">Nov</option>
                            <option>Jan</option>
                            <option>Feb</option>
                            <option>Mart</option>
                        </select>
                    </div>
                    <div class="col-xs-9  col-md-3 col-xs-offset-3 col-sm-offset-3 col-md-offset-0 col-lg-offset-0 reset-padding-right add-margin-bottom">
                        <select class="form-control">
                            <option>1987</option>
                            <option>1987</option>
                            <option>1987</option>
                            <option selected="selected">1986</option>
                            <option>1985</option>
                        </select>
                    </div>
                </div>
                <div class="col-xs-12 reset-padding-left reset-padding-right add-margin-bottom">
                    <div class="col-xs-3 reset-padding-left">
                        <span>Gender</span>
                    </div>
                    <div class="col-xs-9 reset-padding-right">
                        <select class="form-control">
                            <option>Male</option>
                            <option>Female</option>
                        </select>
                    </div>
                </div>
                <div class="col-xs-12 reset-padding-left reset-padding-right add-margin-bottom">
                    <div class="col-xs-3 reset-padding-left">
                        <span>Birth City</span>
                    </div>
                    <div class="col-xs-9 reset-padding-right">
                        <input type="text" class="form-control" />
                    </div>
                </div>
                <div class="col-xs-12 reset-padding-left reset-padding-right">
                    <div class="col-xs-3 reset-padding-left">
                        <span>Birth Country</span>
                    </div>
                    <div class="col-xs-9 reset-padding-right">
                        <input type="text" class="form-control" />
                    </div>
                </div>
            </div>
        </section>

如果我需要添加更多，我只添加了前两个井的结构我添加了重置。有没有办法让第三个井在第一个井下进行imediatly？

Answer 1

如果设置为每个偶数列.col-sm-6 float：right而不是float：left它似乎正在工作

.col-sm-6:nth-child(even) {
float:right;
}

Answer 2

尝试查看“检查元素”以了解空间的来源。这可能是一些填充或边缘。

您可以使用填充/边距向元素添加自己的类，并为该类提供其他或负边距。

删除引导井下的空间

2 个答案: