Question

我使用bootstrap 3.3.7。

我有这个HTML：

<div class="container-fluid removeSpaceLeft-15 removeSpaceRight-15">
    <div class="col-xs-4 removeSpaceLeft-15 removeSpaceRight-15">
        <input type="text" class="form-control btn-sm" id="maxFeatures" value="0" />
    </div>
    <div class="col-xs-5 removeSpaceLeft-15 removeSpaceRight-15">
        <label for="maxFeatures">max results: </label>
    </div>
    <div class="col-xs-3 removeSpaceLeft-15 removeSpaceRight-15">
        <input type="button" class="btn btn-default btn-sm" id="btnExecute" value="Submit" />
    </div>
</div>

<hr />



<div class="container-fluid nopadding">
    <div class="panel panel-default">
        <div class="panel-heading">Select layer</div>
        <div class="panel-body">
            <select id="layerName1" class="form-control" style="max-width: 100%!important"></select>
        </div>
    </div>
</div>

这里正在工作JSfIDDLE

正如你在小提琴中看到的那样，元素之间存在重叠。

知道为什么我会重叠吗？

Answer 1

你错过了一行：

<div class="container-fluid removeSpaceLeft-15 removeSpaceRight-15">
    <div class="row">
        <div class="col-xs-4 removeSpaceLeft-15 removeSpaceRight-15">
            <input type="text" class="form-control btn-sm" id="maxFeatures" value="0">
        </div>
        <div class="col-xs-5 removeSpaceLeft-15 removeSpaceRight-15">
            <label for="maxFeatures">max results: </label>
        </div>
        <div class="col-xs-3 removeSpaceLeft-15 removeSpaceRight-15">
            <input type="button" class="btn btn-default btn-sm" id="btnExecute" value="Submit">
        </div>
    </div>
</div>

Bootstrap应该有嵌套在行中的列，以及嵌套在容器中的行。该站点可以检查您的引导程序是否有效：DependencyService

为什么我在HTML元素之间重叠？

1 个答案: