引导网格系统 - 当设备宽度较小时，文本会出现在下一行答案

【问题标题】：Bootstrap grid system - text goes on the next row when device width is smaller引导网格系统 - 当设备宽度较小时，文本会出现在下一行
【发布时间】：2016-01-08 23:16:09
【问题描述】：

我的页面结构如下：

<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>

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

【问题讨论】：

标签： css twitter-bootstrap grid

【解决方案1】：

移动断点处的每一列都有 100% 的宽度，这意味着您的 .col-md-* 类在较小的尺寸下都将具有 100% 的宽度。这是响应式网格系统的普遍期望。

要在同一行上获取图像和输入，您必须添加另一个类来覆盖由引导 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>

这应该可以解决问题。

【讨论】：