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

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

但是当它们折叠时也会影响它们的 children，在这种情况下是您的 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% 的宽度显示。

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

div goes down when page view 737 width w/ bootstrap

html

css

twitter-bootstrap

responsive-design

responsive-images