那些遇到过的问题

Bootstrap列未正确对齐

And*_*i P 14 html css twitter-bootstrap

我使用Bootstrap 3构建了一个布局,我有以下问题:我有一个新闻部分,设置为显示总共9个新闻项,每行3个,总计3行.但是,它们似乎没有正确对齐.请看下面的图片.

列未正确对齐

html:

          <div class="row">
            <div class="col-md-12 small-article-container"><!-- Small articles container -->
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  ast?zi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>asdasds: CELE MAI A?TEPTATE TITLURI ALE LUI 2014</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arat? care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  ast?zi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>AMENIN??RI CU MOARTEA ee df PENTRU PRE?EDI as HOLLANDE</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arat? care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  ast?zi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>AMENIN??RI CU MOARTEA PENTRU PRE?EDINTELE HOLLANDE</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arat? care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  ast?zi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>asdasds: CELE MAI A?TEPTATE TITLURI ALE LUI 2014</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arat? care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  ast?zi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>AMENIN??RI CU MOARTEA ee df PENTRU PRE?EDI as HOLLANDE</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arat? care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  ast?zi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>AMENIN??RI CU MOARTEA PENTRU PRE?EDINTELE HOLLANDE</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arat? care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  ast?zi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>asdasds: CELE MAI A?TEPTATE TITLURI ALE LUI 2014</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arat? care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  ast?zi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>AMENIN??RI CU MOARTEA ee df PENTRU PRE?EDI as HOLLANDE</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arat? care  este...
                </div>
              </div>
              <div class="col-md-4 small-article"><!-- Start small article -->
                <div class="col-md-12 small-category">
                  <strong><a href="#">Stil de viata</a></strong>
                </div>
                <div class="col-md-12 small-article-img">
                  <a href="#"><img src="images/MH-370-200x130.jpg" width="253" height="164" alt="Small article picture" class="img-responsive"></a>
                </div>
                <div class="col-md-12 small-article-date">
                  ast?zi, 14:08
                </div>
                <div class="col-md-12 small-title">
                  <a href="#"><strong>AMENIN??RI CU MOARTEA PENTRU PRE?EDINTELE HOLLANDE</strong></a>
                </div>
                <div class="col-md-12 small-excerpt">
                  În articolul publicat luni în  Financial Times, liderul spiritual turc Fethullah Gülen arat? care  este...
                </div>
              </div>
              <div class="col-md-12 more-news">
                <a href="#">MAI MULTE stiri</a>
              </div>
            </div>
          </div>
Run Code Online (Sandbox Code Playgroud)

css:

.small-article-container {
margin-top: 1em;
}

.small-article {
/*  padding: 0;
*/  margin-bottom: 1em;
padding-right: 0.5em;
padding-left: 0.5em;
/*  float: right;
*/}

.small-category {
padding: 0;
font-size: 0.9em;
}

.small-article-img {
padding: 0;
width: 100%;
}

.small-article-date {
padding: 0;
padding-top: 0.5em;
font-size: 0.9em;
color: #545454;
}

.small-title {
padding: 0;
line-height: 1.3em;
font-size: 1em;
text-transform: uppercase;
}

.small-excerpt {
padding: 0;
font-size: 0.9em;
}
Run Code Online (Sandbox Code Playgroud)

有人可以请你解决这个问题吗？我正在做噩梦.谢谢.

小智 11

你真是太近了 列类在引导程序样式中设置了float属性,并且您的列是浮动的,而不是您期望的那样.第一行中的中间列阻止了您在空白区域中看到的那个正确包装,因为它比其他列高.您需要做的就是将每组3个连续包装成如下:

<div class="row">
    <div class="col-md-4">
        //stuff here
    </div>
    <div class="col-md-4">
        //stuff here
    </div>
    <div class="col-md-4">
        //stuff here
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        //stuff here
    </div>
    <div class="col-md-4">
        //stuff here
    </div>
    <div class="col-md-4">
        //stuff here
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        //stuff here
    </div>
    <div class="col-md-4">
        //stuff here
    </div>
    <div class="col-md-4">
        //stuff here
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

像这样设置它,你准备好了.

nei*_*zan 5

老问题，但我只是遇到了同样的问题。

正如@alex 在评论中提到的，Bootstrap 开发人员建议clearfix为此使用。该链接将您转至此处，其中讨论了使用clearfix div.

我没有为 插入额外div的内容clearfix，而是nth-of-type根据每行的列数（在本例中为三）选择了元素，并清除了这些元素上的浮点数。如果行中的所有元素都具有相同的宽度，它就会起作用，这里似乎就是这种情况。它对我有用。

对于 OP 给出的示例，CSS 可能如下所示：

@media only screen and (@screen-md-min) {
    .small-article:nth-of-type(3n + 1) {
        clear: both;
    }
}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

16681 次

最近记录：

6 年，11 月 前
相关归档
使用CSS在表格单元格中对齐 122
为同一网页的不同部分应用不同的css样式表 22
首先加载低分辨率背景图像,然后加载高分辨率背景图像 21
<a>标签的"data-url"和"data-key"属性是什么？ 20
CSS转换与位置 19
我如何重构我的CSS？ 19
Preventing Bootstrap button from filling flexbox 9
如何在 React 应用程序中自定义 Bootstrap 变量？ 7
如何在Navbar中创建Bootstrap 4全宽下拉列表？ 7
如何将 for 循环与 bootstrap carousel 一起使用 3
难疑归档
var functionName = function(){} vs function functionName(){} 6645
什么是"大O"符号的简单英语解释？ 4851
如何在C#中枚举枚举？ 3620
使用'for'循环迭代字典 2901
如何使用保存实例状态保存Android Activity状态？ 2538
忽略已提交到Git存储库的文件 2429
ssh"权限太开放"错误 1859
如何在Python中获取列表中的元素数量？ 1846
如何在Git中检索当前提交的哈希值？ 1788
@classmethod和@staticmethod对初学者的意义？ 1532