html - Bootstrap CSS，网格问题

Question

我想创建一个带有网格标题的面板。

我的代码是:

<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>

但是正如您在这个 JSfiddle 中看到的那样:https://jsfiddle.net/eupgjkf3/2/

对于小尺寸屏幕，最后一个格子在下降，但是所有格子的总数是 12。另外我怎样才能把十字架推到右上角？一旦我向它添加一些 margin-left，它就会下降。

Answer 1

你应该把你的 glyphicondiv inside 一个有 col-... 类的 div，而不是在同一个 div 中