Bootstrap CSS, issue with grid

Question

I would like to create a panel with a grid header.

My code is:

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-offset-1 col-md-9 col-lg-offset-2 col-lg-8">
        <div class="panel panel-success">
            <div class="panel-heading">
                <div class="row">
                    <label class="col-xs-3 col-sm-3 col-md-2 col-lg-2" for="module">Module</label>
                    <div class="col-xs-8 col-sm-8 col-md-9 col-lg-9">
                        <select class="form-control">
                            <option value="module1">Module 1</option>
                            <option value="module2">Module2</option>
                        </select>
                    </div>
                    <div class="glyphicon glyphicon-remove deleteModule col-xs-1 col-sm-1 col-md-1 col-lg-1" aria-hidden="true">
                    </div>
                </div>
             </div>
             <div class="panel-body form-horizontal">
             </div>
        </div>
    </div>
</div>

But as you can see in this JSfiddle: https://jsfiddle.net/eupgjkf3/2/

For small sized screen, the last grid is going down, however total of all grids is 12. Also how can I push the cross to the top right corner? As soon as I'm adding some margin-left to it, it goes down.

Answer 1

您应该将glyphicon div 放在具有col -...类的div中，而不是放在同一div中

Answer 2

Try this solution!

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-offset-1 col-md-9 col-lg-offset-2 col-lg-8"> <div class="panel panel-success"> <div class="panel-heading"> <div class="row"> <div class="col-xs-3 col-sm-3 col-md-2 col-lg-2"> <label for="module">Module</label> </div> <div class="col-xs-6 col-sm-6 col-md-8 col-lg-8"> <select class="form-control"> <option value="module1">Module 1</option> <option value="module2">Module2</option> </select> </div> <div class="col-xs-3 col-sm-3 col-md-2 col-lg-2"> <div class="text-right"> <span class="glyphicon glyphicon-remove deleteModule" aria-hidden="true"></span> </div> </div> </div> </div> <div class="panel-body form-horizontal"> </div> </div> </div> </div>