CODEWITHSUNDEEP
twitter-bootstrap
Michael
Michael

Reputation: 13616

Why I get overlap between HTML elements?

I use bootstrap 3.3.7.

I have this 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>

HERE IS WORKING JSfIDDLE

As you can see in fiddle i have overlap between the elements.

Any idea why I get overlap?

Upvotes: 0

Views: 30

Answers (1)

Ginger Squirrel
Ginger Squirrel

Reputation: 663

You are missing a row:

<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 should have columns nested in rows, and rows nested in containers. This site can check if your bootstrap is valid: http://www.bootlint.com/

Upvotes: 1

Related Questions