引导网格布局不会从行的开头排列 div [重复]答案

【问题标题】：bootstrap grid layout doesnot arrange div from starting of row [duplicate]引导网格布局不会从行的开头排列 div [重复]
【发布时间】：2023-03-31 10:01:01
【问题描述】：

我有 4 个 div 如下：

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

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

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

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

为什么第 4 个 div 低于 div 3 而不是低于 div 1。

如何修改我的代码，使一行最后一个 div 之后的任何 div 从下一行的开头开始出现？

【问题讨论】：

那是因为高度问题，可能需要使用砌体插件
您可以在一行中添加前 3 个 div，然后在另一行中添加下一个，这将有间距问题，或者您可以使用 @Naila 告诉的砖石
也许这篇文章对你有帮助：w3bits.com/css-masonry
这是因为列的高度，并且已经在 SO 上得到了回答。请参阅stackoverflow.com/questions/24718039/…、stackoverflow.com/questions/19572753/… 和 stackoverflow.com/questions/19196082/… 您的选择是使用 clearfix、使列具有相同的高度、使用 CSS3 列或砌体插件。

标签： html twitter-bootstrap

【解决方案1】：

补充row：

<div class="row">
    <div class="col-xs-4" >
     div1
    </div>
    <div class="col-xs-4" >
    div2
    </div>
    <div class="col-xs-4" >
     div3
    </div>
</div>
<div class="row">
    <div class="col-xs-4" >
    div4
    </div>
</div>

row 不允许行外相对定位的元素与其内容重叠，因此第 4 个 div 将被放置在下方，并且其上边缘将低于第一行最高 div 的下边缘。

【讨论】：

【解决方案2】：

如果使用 boostrap，您的 html 代码是正确的。我认为问题是一些height 和width 问题。我建议Div 使用height and width 样式。

使用下面的 css 样式属性来解决它。

width, height, max-width, min-width, max-height and min-height

尝试这样的事情。

   <div class="row">
    <div class="col-xs-4" >
      <div class="content">div1</div>
    </div>

    <div class="col-xs-4" >
    <div class="content">div2</div>
    </div>

    <div class="col-xs-4" >
    <div class="content">div3</div>
    </div>

    <div class="col-xs-4" >
    <div class="content">div4</div>
    </div>
  </div>

【讨论】：

【解决方案3】：

您需要砌体插件才能让 div 按您的意愿放置，这是一个链接：Masonry。 div 的不同高度会使它们不流动，你会看到它们没有出现在你想要的位置。同样使用 Boostrap，任何给定行中的列都必须小于或等于 12。在您的行中，它们等于 16，并被推入他们可以找到的下一个可用空间。

你的 HTML 结构应该是：

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

如果您希望所有列的高度相同，我建议使用 flexbox 布局：

.row-flex, .row-flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}

.row-flex-wrap {
    -webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex:0;
}

由于您所有的 div 都有不同的高度（根据您的图片），您最好使用 masonry 插件。

【讨论】：

【解决方案4】：

将所有<div class="col-xs-4"></div> 放入行结构<div class="row"></div>

示例如下：

 <div class="row">
    <div class="col-xs-4" >
     div1
    </div>
    <div class="col-xs-4" >
    div2
    </div>
    <div class="col-xs-4" >
     div3
    </div>
    <div class="col-xs-4" >
    div4
    </div>
    </div>

我想，你想要

砌体图片库

效果，具体效果请查看以下网址

http://bootsnipp.com/snippets/featured/masonry-image-gallery

【讨论】：