div当页面浏览737宽度w/bootstrap

问题描述：

我陷入了这一点。我正在处理我的自定义网站的响应能力。我正在使用bootstrap。为什么我的<div class="col-xs-4">在737x宽度的视图中下降。屏幕截图如下： div当页面浏览737宽度w/bootstrap

我希望图像的框位于文本的右侧。我的形象是<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; 
}

很可能是因为您正在搞乱行和列边距。这些是BS电网系统工作的一个组成部分，你不能只是去改变它们，并期望事情能够正常工作。 – CBroe

我该如何解决这个问题先生？ –

取决于你想实现的目标。 – CBroe

答

看看这可以帮助你：
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">

一切都很好。

你好先生..多么明智的答案..谢谢先生。你真的帮我 –

谢谢，我很高兴这有助于@JcJohn。通常在为自己排除布局类型问题时，我会使用将颜色应用于div或元素背景的精确技术。它往往有助于缩小原因。祝你工作顺利！ –

答

可以使用COL-XS特性与COL-MD就像

低于767px

的Col-XS物业工作，但如果我们用COL-XS属性，则内容会显得收缩，你必须要管理内容CSS根据观点。

div当页面浏览737宽度w/bootstrap

相关推荐