堆棧內存溢出
  簡體   English   中英

Bootstrap列未正確對齊

[英]Bootstrap columns not aligning correctly

 原文  2014-04-04 14:53:18  5   4    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>

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;
}

有人可以請你解決這個問題嗎？ 我正在做噩夢。 謝謝。

4 個解決方案

解決方案1
 11 已采納  2014-04-04 15:10:38

你真是太近了 列類在引導程序樣式中設置了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>

像這樣設置它，你准備好了。

解決方案2
 3  2016-04-10 15:07:14

然而，對於遇到這個問題的其他人來說，這個派對很晚：

正如j.burnette所說，在.row類中包裝每3 .small-article將解決這個問題。

除了添加額外的HTML， CSS的唯一方法是為.small-article設置min-hight屬性： 

.small-article {
    min-height: (height of largest .small-article)px;
}

這將取決於知道最高.small-article的height並將其設置為min-height 。 您應該能夠根據生成圖像的方式和文本摘錄最大長度來確定這一點。

如果需要更加自動化，您可以使用CSS和JS獲取最高盒子的高度，然后將min-height應用於.small-article類。

為了速度，你總是可以抓住一個插頭為你做這件事。 這是我經常使用的jQuery插件：

jquery.heightMatch.js

我假設你使用BS3時可以使用jQuery。 我不會寬恕使用JS插件來完成這么小的任務，但你可能會在你的網站上的其他地方使用這個插件可能對匹配高度有用

解決方案3
 1  2017-01-18 16:42:15

老問題，但我剛才有同樣的問題。

正如@alex在評論中提到的，Bootstrap開發人員建議使用clearfix 。 該鏈接指向此處 ，使用clearfix div討論響應列重置。

我沒有為clearfix插入額外的div ，而是根據每行的列數（在這種情況下為3）選擇了nth-of-type元素，並清除了那些元素上的浮點數。 如果行中的所有元素都具有相同的寬度，則它可以工作，這在這里就是這種情況。 它對我有用。

對於OP給出的示例，CSS可能看起來像這樣： 

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

解決方案4
 0  2018-12-05 18:25:16

也是晚建議 - 同樣的問題在這里有2列包含所有相同高度的圖像。 由於div的生成方式，我無法為各個div添加一個clearfix，並且當通過css以奇數div為目標添加時，它不起作用。 所以對我來說最簡單的解決方案是為奇數div添加填充： 

.col-md-6:nth-child(odd){padding-bottom:15px;}

或者，也可以給奇數div的高度略高於圖像高度： 

 .col-md-6:nth-child(odd){height:310px;}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Bootstrap列未正確對齊，AngularJS循環 大小均勻的 Bootstrap 列未正確對齊 Bootstrap容器流體：底部容器未正確對齊列 引導網格未正確對齊 Bootstrap網格未正確對齊 列屬性未正確對齊 對齊引導程序中的列4 無法使用 Bootstrap 4 對齊列 對齊不同的引導程序列 在引導列中對齊圖像
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM