Bootstrap-向右拖动元素与文本内容重叠

Question

使用 AdminLTE模板通过 ANGULAR 5 + bootstrap 3.4 创建仪表板布局， 在其中一个组件中，我必须对齐图像，标题和一行中的下拉菜单，这在调整大小时会导致下拉菜单与标题的文本内容重叠。

全页视图：

调整大小或最小化的浏览器：

HTML片段：

<div  class="col-md-4"> //---> entire layout split between 3 boxes 
      <span  class="info-box-icon-sm"> //---> adds float:left property for the icon
        <i  class="fa fa-search" id="escalatedIcon"></i>
      </span>
      <h4 >Search Requests</h4>
      <div class="box-select pull-right">
        <select class="ng-untouched">
           <option class="select-bg-white" value="country">
            country
          </option>
        </select>
      </div>
    </div>

我尝试将单个div添加到每个元素中，然后添加boostrap“ col”大小，但是下拉菜单似乎总是与标题重叠，我是否会因为缺少一些东西而变得简单，因为我是响应式设计的初学者？ 感谢您的回应

Answer 1

您要达到什么目标？布局应该如何？ 问题出在您的h4的CSS中，未格式化。 h4是内联的，因此将被视为普通文本。

<div  class="col-md-4"> //---> entire layout split between 3 boxes 
      <span  class="info-box-icon-sm"> //---> adds float:left property for the icon
        <i  class="fa fa-search" id="escalatedIcon"></i>
      </span>
      <div style="white-space: normal;"> <-- give  css
      <h4 >Search Requests</h4>
      </div>
      <div class="box-select pull-right">
        <select class="ng-untouched">
           <option class="select-bg-white" value="country">
            country
          </option>
        </select>
      </div>
    </div>

设置为nowrap吗？并检查文字是否溢出。最好将h4包裹在div中，以便您可以设置溢出和包裹文本

normal  Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default  
nowrap  Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered  
pre Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML 
pre-line    Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks   
pre-wrap    Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks   
initial Sets this property to its default value. Read about initial 
inherit Inherits this property from its parent element. Read about inherit