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。另外我怎么能把十字架推到右上角？只要我向它添加一些保证金，它就会下降。

Answer 1

你应该将你的glyphicon div 放在一个div与col -...类中，而不是在同一个div中

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

Bootstrap CSS，网格问题

2 个答案: