Question

我有以下引导代码：

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-2 col-md-2 col-sm-2">
      <div style="width: 75px; background-color: #ccc">
        <img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
      </div>
    </div>
    <div class="col-xs-10 col-md-10 col-sm-10" style="">
      Right content
    </div>
  </div>
</div>

在平板电脑和台式机上，此代码看起来不错。但是，在较小的设备xs上，正确的内容会流入图像。我试图使文本只是在右边包裹，而不是与图像碰撞。

我有一个fiddle here，所以你可以看到我在说什么。如果您打开小提琴并将浏览器调整得足够小，您将看到右侧文本重叠到图像上。我该如何防止这种情况？

Answer 1

试试这个。

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3 col-md-2 col-sm-2">
      <div style="width: 75px; background-color: #ccc">
        <img class="img-responsive" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
      </div>
    </div>
    <div class="col-xs-9 col-md-10 col-sm-10" style="">
      Right content
    </div>
  </div>
</div>

Answer 2

这是因为设置了宽度。试试这个。

<强> JSFiddle

HTML

   <div class="container-fluid">
      <div class="row">
        <div class="col-xs-2 col-md-2 col-sm-2">
          <div style="background-color: #ccc">
            <img class="test-image" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
          </div>
        </div>
        <div class="col-xs-10 col-md-10 col-sm-10" style="">
          Right content
        </div>
      </div>
    </div>

CSS

.test-image{
  width:100%;
  height:auto;
  min-width:25px;
}

Answer 3

这是因为col -xs的宽度-2。你可以使用它。或者尝试这样的替代解决方案

<div class="container-fluid">
  <div class="row">
 <div class="col-xs-12">
    <div style="width: 75px; background-color: #ccc;display:table-cell;">
         <img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
    </div>
     <div class=" " style="display:table-cell;vertical-align:middle;">
        Right content
    </div>
</div></div></div>

或者像

这样的css flexbox

<div class="container-fluid">
    <div class="row">
     <div class="col-xs-12" style="display:flex">
    <div style="width: 75px; background-color: #ccc;flex:1;">
         <img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
    </div>
     <div class=" " style="flex:1;vertical-align:middle;">
        Right content
     </div></div></div></div>

Answer 4

我知道最简单的方法是将直接宽度应用于元素。理论上你可以改变bootstrap 3 SCSS或LESS（无论你使用哪个）并添加一个特殊的列类，但这是最直接的方法。

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div style="width:75px" class="col-xs-2">
      <div style="width: 75px; background-color: #ccc">
        <img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
      </div>
    </div>
    <div class="col-xs-10 col-md-10 col-sm-10" style="">
      Right content
    </div>
  </div>
</div>

Bootstrap：包装文本

4 个答案: