Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
242 views
in Technique[技术] by (71.8m points)

html - Bootstrap columns not aligning correctly

I've built a layout using Bootstrap 3, and I have the following problem: I have a news section that is set to display a total of 9 news items, 3 on each row, summing 3 rows. However, they don't seem to align properly. Please see the picture below.

Columns not aligning correctly

The 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>

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

Could anyone please hep me out on this ? I'm having nightmares about it. Thanks.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You're so close. The column classes have the float attribute set in the bootstrap styles and your column is floating, just not where you expect it. That middle column in the 1st row is preventing the one you see floating off in the blank space from wrapping properly because it's taller than the others. All you need to do is wrap each group of 3 in a row like this:

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

Set it up like that and you're ready to go.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...