Question

我试图让一个网站有一套很好的专栏。现在，除非文本长度完全相同（并且图片的高度完全相同），否则该网站将显示巨大的空白区域。下图显示了一些用于测试主题的虚拟产品。

我无法正确对齐项目。这是拉动产品的HTML循环：

<div class="container-fluid lg-container">
<div class="row">
<div class="container-fluid">
{bundle = filter(pages, 'product') }
            <div class="row row-body row-margin-bottom no-padding">
            { foreach item in bundle }

                <div class="col-xs-12 col-sm-6 col-md-4" data-category="view">
                <div class="lib-panel">
                        <div class="lib-header">
                            <a href="#">{{ item.title }}</a>
                        </div>
                    <div class="row xsm-catpad ">
                        <a href="{ item.url }" >
                        <img src="http://xpenology.org/wp-content/themes/qaengine/img/default-thumbnail.jpg" class="lib-img-show img-responsive" />
                        </a>
                            <div class="lib-desc">
                                <p{ item.content }...</p>
                            </div>
                       <div class="col-xs-12">
                            <a href="{{ item.url }}" title="{{ item.meta.title }}"><button class="btn christmas">Check it out</button></a>
                       </div>
                        </div>
                </div>
            </div>
    {% endfor %}
    </div>
    </div>
    </section>
      </div><!-- /.row -->
    </div>

这是一些CSS，我希望我包含了所需的内容，但它是一个大文件：

.row-body 
{
    padding: 0;
    margin: 0px;
}
.lib-panel {
    margin-bottom: 20Px;
}
.lib-panel img {
    width: auto;
    background-color: transparent;
}

#md-img{
    width: auto;
}
.lib-panel .row,
.lib-panel .col-md-6 .col-sm-6 .col-sm-4 .col-md-4 .col-sm-3 .col-md-3{
    padding: 0;
}

.lib-panel .lib-wide-row {
    padding: 0 0 0 0;
}

.lib-panel .lib-header {
    text-align: center;
    font-size: 20px;
    padding: 10px 5px 0 5px;
}
@media (max-width: 768px) and (min-width: 300px) {
    .lib-panel .lib-header {
    font-size: 40px;
    }
    .row .row .xsm-catpad{
    width: 80%;
    margin: auto;
    }
body {padding-bottom: 125px;}
}

.lib-panel .lib-row.lib-mini-header {
    text-align: justify;
    font-size: 16px;
    padding: 5px 0px 0 0px;
}
.lib-panel .lib-row.lib-ad-header {
    text-align: left;
    font-size: 16px;
    padding: 5px 0px 0 0px;
}

.lib-panel .lib-row.lib-desc {
    position: relative;
    height: 100%;
    display: block;
    font-size: 12px;
}
.lib-desc p{
     font-size: 14px;
    text-align: justify;
}

.lib-panel .lib-wide-row.lib-wide-desc {
    height: 100%;
    font-size: 12px;
}
.lib-panel .lib-row.lib-desc a{
    position: absolute;
    width: 100%;
    bottom: 10px;
    left: 20px;
}

.row .row .xsm-catpad{
width: 80%;
margin: auto;
}

Answer 1

呃，我需要做的就是添加这个

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

一切都立即修好了。

Answer 2

我经常遇到这个问题，通常通过将行和列显示为flex来修复它。 e.g。

<div class="row flexrow">
   <div class="col-sm-6">
     content
  </div>
  <div class="col-sm-6">
     content
   </div>
</div>

CSS：

.featurerow, .featurerow > col-sm-6{
display: flex;
}

Answer 3

Bootstrap有一个特殊的类。只需在每行列之后添加<div class="clearfix"></div>。

（Bootstrap）使列显示为内联块

3 个答案: