Bootstrap CSS，网格问题答案

【问题标题】：Bootstrap CSS, issue with gridBootstrap CSS，网格问题
【发布时间】：2015-06-21 17:55:24
【问题描述】：

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

我的代码是：

<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，它就会下降。

【问题讨论】：

标签： html css twitter-bootstrap grid

【解决方案1】：

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

【讨论】：

【解决方案2】：

试试这个解决方案！

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

【讨论】：