當頁面視圖737寬度帶引導時div下降

Question

我堅持這一點。 我正在使用自定義網站的響應能力。 我正在使用引導程序。 為什么我的<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％。