Bootstrap 3.3.7中的异常，'row'类和'col'cllass

Question

当我使用'row'类时，我的行为异常 整个宽度不显示'notes'字段。似乎以自己的方式行事。 我使用了bootstrap 3.3.7，jquery-1.12.4，jquery.dataTables 1.10.16，bootstrap-select 1.12.4

        <div class="table-bordered" style="padding:10px;margin:5px; border-color:dodgerblue; border-width:2px">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <h3 style="margin-bottom:5px; margin-top:20px; color:dodgerblue; align-content:center">Aggiungi Anomalie<span class="badge badge-default"></span></h3>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <select id="ListaAnomalieSelect" name="ListaAnomalieSelect" class="selectpicker form-control" title="Selezionare Ammaloramento..."></select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <select class="selectpicker form-control" title="Selezionare Gravità...">
                                    <option>Lieve</option>
                                    <option>Medio</option>
                                    <option>Alto</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <select class="selectpicker form-control" title="Selezionare Estensione...">
                                    <option value="5">5%</option>
                                    <option value="10">10%</option>
                                    <option value="15">15%</option>
                                    <option value="20">20%</option>
                                    <option value="25">25%</option>
                                    <option value="30">30%</option>
                                    <option value="40">40%</option>
                                    <option value="50">50%</option>
                                    <option value="60">60%</option>
                                    <option value="70">70%</option>
                                    <option value="80">80%</option>
                                    <option value="90">90%</option>
                                    <option value="100">100%</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <textarea rows="3" class="form-control" id="Note" name="Note" placeholder="Note"></textarea>
                            </div>
                        </div>
                    </div>
                    <button id="AddAnomalia" class="btn btn-success" type="button" style="margin-bottom:20px; margin-top:20px;"><i class="glyphicon glyphicon-ok"></i> Aggiungi</button>
                </div>

Chrome浏览器上的结果是

有谁知道错误在哪里？谢谢

Answer 1

问题是.row只能 包含列。将内容包装在.col-中，如下所示：

          <div class="row">
                <div class="col-xs-12">
                        <h3 style="margin-bottom:5px; margin-top:20px; color:dodgerblue">Anomalie Elemento<span class="badge badge-default"></span></h3>
                        <div class="table-responsive" style="width: 100%; border: 1px solid black; padding: 3px; margin-top:10px;">
                            <table id="AnomalieDatatable" class="display table-striped table-hover table-bordered" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Anomalia</th>
                                        <th>Estensione</th>
                                        <th>Note</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
               </div>
         </div>