Question

我的标签重叠在我的div行

中有问题

我的引导程序如下所示

    <div class="col-xs-12 col-md-12 col-lg-12">
      <div class="row">
        <div class="col-xs-12 col-md-12 col-lg-2 ">
          <div class='card'>
               <div class='card-block'
                 <div class="row text-nowrap">
                    <label class="control-label col-xs-12 col-md-12 col-lg-6" for="FinalMonthEnd">Final Month End:</label>
                    <kendo-dropdownlist class="col-xs-11 col-md-11 col-lg-5" id="FinalMonthEnd">
                    </kendo-dropdownlist>
                  </div>
            </div>
         </div>  
       <div class="col-xs-12 col-md-12 col-lg-10 ">
         <kendo-grid [kendoGridBinding]='grid' >       
         </kendo-grid>
       </div>
    </div>
  </div>

我必须将此添加到我的css中，因为标签文本很大，所以当调整大小时，文本将一次转到下一行一个字母。

.text-nowrap {
   white-space: nowrap;      
}

当页面在达到col-md阈值之前调整大小时，两者开始合并并相互重叠，看起来很糟糕。我怎样才能防止这种情况发生，以便每次分开？

Answer 1

（1）<div class='card-block'缺少>。

（2）尝试将form-group类而不是row应用于label和kendo-dropdownlist的父div。

（3）尝试将form-control课程添加到kendo-dropdownlist。

（4）在Bootstrap v4.0中删除了类前缀col-xs，并且不再可识别。您应该使用col-代替（虽然它不会对您的代码产生影响，只是提到了它的信息）。

希望这有助于某些方向。

div中的元素在调整大小时重叠Bootstrap

1 个答案: