文本环绕到屏幕上的下一行调整大小

Question

我有一个UI，我在一个图块上显示一个带有一些文本（右侧）的图标。 这里的问题是，当我调整屏幕大小时，文本会被包裹到下一行，即使我减小文本大小，它仍然不会在图标旁边对齐。 谁能帮我吗？ 这是一个视觉表现。这是当屏幕为完整尺寸时：

然后这是调整大小时发生的事情：

如何将图标旁边的文字与原始尺寸（完整尺寸）一样？

这是显示图标和文字的代码：

 <div class="row">
    <div class="col-md-2 resize" data-toggle="tooltip" title="Date of Birth">
      <i class="i class="fa fa-calendar fa-2x icon-white" style="margin-top:17%;"></i>
    </div>

    <div class="col-md-10">
      <h4 class="icon-white m-h4" id="dob">16-Jul-2014</h4>
    </div>    
</div>

Answer 1

将col-md更改为col-xs

<div class="row">
    <div class="col-xs-2 resize" data-toggle="tooltip" title="Date of Birth">
      <i class="fa fa-calendar fa-2x icon-white" style="margin-top:17%;"></i>
    </div>

    <div class="col-xs-10">
      <h4 class="icon-white m-h4" id="dob">16-Jul-2014</h4>
    </div>    
</div>

Answer 2

将cols更改为单行，例如col-md-12。然后将图标应用为背景。

或者，使用

<div class="col-md-2 col-xs-2">

等等。 根据您的布局，您可能需要调整切割点，因此第一种方法总是更好，更理想