当页面视图737宽度w / bootstrap时div下降

Question

我坚持这个。我正在使用自定义网站的响应能力。我正在使用bootstrap。为什么我的<div class="col-xs-4">在737x宽度的视图中出现故障。这是截图：

我希望图像框位于文本的右侧。我的图片在<div class="col-xs-4">内 这是jsfiddle：https://jsfiddle.net/DTcHh/26370/

这是我的结构：

<div class="container-fluid">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
  <div class="row row-left">
    <div class="col-xs-4 col-box2">

    </div>
    <div class="col-xs-4 col-box2">

    </div>
    <div class="col-xs-4 col-box2">

    </div>
    <div class="col-xs-4 col-box2">

    </div>
  </div>
  <div class="row row-left">
    <div class="col-xs-4 col-box2">

    </div>
    <div class="col-xs-4 col-box2">

    </div>
    <div class="col-xs-4 col-box2">

    </div>
    <div class="col-xs-4 col-box2">

    </div>
  </div>
</div>
</div>
</div>

我的css：

.col-box2 img {
    width: 80%;
    height: auto;
}
.col-box2 {
   display:inline-block;
   float:none;
   text-align:left;
   margin-right: 3.6%;
   width: 15.6%;
   margin-bottom: 2%;
}
.row-left {
    margin-right: 0;
    text-align: left;
}

Answer 1

看看这是否对您有所帮助：
https://jsfiddle.net/panchroma/DTcHh/26371/

您的HTML的第3行和第5行

<div class="col-md-4">

和

<div class="col-md-8">

但是当它们崩溃时，它也会影响他们的孩子，在这种情况下是你的col-xs-4元素

您会看到我已将HTML的第3行和第5行更改为

<div class="col-xs-4">

和

<div class="col-xs-8">

一切都很好。

Answer 2

您可以将col-xs属性与col-md一起使用，就像

一样

Col-xs属性工作低于767px但是如果我们使用col-xs属性，那么内容将看起来缩小，你必须根据视图管理内容css。

如果我们使用col-md属性，那么内容将在移动设备中以100％宽度显示。