使用引导网格的错误位置答案

【问题标题】：Bad position using bootstrap grid使用引导网格的错误位置
【发布时间】：2017-06-24 06:19:18
【问题描述】：

接下来的事情我需要一些帮助：

那些是：

<div class="row"><div class="col-md-4">
                        <a class="individ" href="index.php?p=x" style="margin:5px 5px;">User Simple1<br></a>
                        </div><div class="col-md-4">
                        <a class="individ" href="index.php?p=x" style="margin:5px 5px;">User Advanced2<br>Title</a>
                        </div><div class="col-md-4">
                        <a class="individ" href="index.php?p=x" style="margin:5px 5px;">User Simple3<br></a>
                        </div><div class="col-md-4">
                        <a class="individ" href="index.php?p=x" style="margin:5px 5px;">User Advanced4<br>Title 4</a>
                        </div><div class="col-md-4">
                        <a class="individ" href="index.php?p=x" style="margin:5px 5px;">User Advanced5<br>Title 5</a>
                        </div></div>

div 的大小每次都不同，因为 div 可能在 <br> 之后有一个“标题”。

所以我需要帮助来获得我在上图中“绘制”的顺序。有什么想法吗？

谢谢！

按钮的 CSS：

color: #3F484D;
background: linear-gradient(to left, #d9534f .0em, transparent 1.0em) no-repeat, linear-gradient(to left, white,white) no-repeat, linear-gradient(#D4D3D3, #D4D3D3);
display: flex;
border-radius: 5px;
line-height: 2em;
position: relative;
overflow: hidden;
padding: 1px 1px;
padding-left: 1px;
display: inline-block;
text-decoration: none;
font-weight: bold;
text-indent: 0.7em each-line;
text-align: center;
min-width: 135px;
font-size: 12px;
background-clip: border-box,content-box, border-box;

}

编辑：感谢您的弹性想法。

接下来为每 3 个 div 使用类行的问题是：我有这样的事情：

  print '<div class="row">';
    for($i=0;$i<count($lines);$i++)
                    {
                        print '<div class="col-md-4">
                            <a class="individ" href="index.php?p=xx" style="margin:5px 5px;">$query[$i] <br>".($query2[$i])."</a>
                            </div>";
                    }

print '</div>';

如何添加 <div class="row"> 每 3 个结果？我只是好奇，想学习。

非常感谢！

【问题讨论】：

标签： php html css twitter-bootstrap

【解决方案1】：

您没有以正确的方式使用“.row”类。你想要的是这样的：

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

如果您也希望它们的大小相同，只需使用 flexbox。

这样的事情应该可以工作：

.row { display: flex; flex-wrap: wrap; }

动态添加行：

$lines = ['', '', '', '', '', '', '', '', '', '', '', '', '', '',];
print '<div class="row">'; // let's start by printing the first one
for($i=0;$i<count($lines);$i++) {
    // at every loop we check whether it's a multiple of three and end the current row and start another one.
    // we also need to check and avoid doing that if we're at the first or last element, to avoid empty divs
    // and similar situations.
    if ( 
           $i !== 0 
        && $i%3 === 0 
        && $i !== count($lines)-1 
    ) {
        print '</div><div class="row">';
    }
    print '
        <div class="col-md-4">
            <a class="individ" href="index.php?p=xx" style="margin:5px 5px;">Line number' . $i . '</a>
        </div>
    ';
}
print '</div>'; // closing the last one

【讨论】：

谢谢！如果您有任何想法每 3 个结果插入一个 div 行，请阅读我编辑的评论并留下回复。

【解决方案2】：

我找到了解决方案。出现问题，因为某些 div 不能自然浮动。如果您可以清除每三个元素，错误就会消失。

.col-md-4:nth-child(3n + 1) {
clear: both;

}

【讨论】：