Bootstrap - 右拉元素与文本内容重叠

Question

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

整页视图：

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

HTML sn-p:

<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