Bootstrap网格系统 - 当设备宽度较小时，文本将在下一行显示

Question

我的页面结构如下：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-9">
        <div class="picture">
          <div class="row" style="margin-left:0px !important;margin-right:0px !important;padding-bottom:10px;">
            <div class="col-md-1">
              <img src="url" />
            </div>
            <div class="col-md-11">
              Some name <br/>
              Some email
            </div>
         </div>
       </div>
     </div>
     <div class="col-md-3">
       some text here
     </div>
  </div>
</div>

我的问题是，当设备宽度较小时，名称和电子邮件会出现在下一行，但不在图像所在的同一行。如何解决？它应该是响应。谢谢！

Answer 1

移动断点处的每列都将具有100％的宽度，这意味着.col-md- *类在较小的大小时都将具有100％的宽度。这是响应式网格系统的常见期望。

要在同一行上获取图像和输入，您必须添加另一个类来覆盖bootstrap col类设置的宽度。 Bootstrap具有特定的类来定位您可以使用的不同断点。请参阅：https://getbootstrap.com/examples/grid/

HTML

<div class="col-md-1 col-xs-6">
  <img src="url" />
</div>
<div class="col-md-11 col-xs-6">
  Some name <br/>
  Some email
</div>

这应该可以解决问题。