2015-05-18 2 views
2

Привет и спасибо за чтение этого сообщения.Выровнять бутстрап div ниже друг друга

Я это установкой с помощью основного загрузчика и некоторые пользовательские CSS

Ссылка на Image

Как вы можете видеть, что есть огромное пространство между некоторым постом и мне было интересно, как я могу «толчок "контейнеры каждого блога так это выглядит красиво

что-то вроде this.

Css

.blog-post-holder .well { 
background-color: #ffffff; 
text-align: center 
} 

.blog-post-holder .well img { 
    width: 90%; 
} 

.blog-post-holder .well hr { 
    border: 1px solid #dbdbdb 
} 

Html

<div class="blog-post-holder"> 
      <div class="col-lg-3"> 
       <div class="well">dwadwada<br />wdewad</div> 
      </div> 
      <div class="col-lg-3"> 
       <div class="well"> 
        <img src="http://www.verticalresponse.com/blog/wp-content/uploads/2013/02/blogimg1-620x350.jpg" /> 
        <hr /> 
        dwadwada<br />wdewad 
       </div> 
      </div> 
      <div class="col-lg-3"> 
       <div class="well">dwadwada<br />wdewad</div> 
      </div> 
      <div class="col-lg-3"> 
       <div class="well"> 
        <img src="http://www.verticalresponse.com/blog/wp-content/uploads/2013/02/blogimg1-620x350.jpg" /> 
        <hr /> 
        dwadwada<br />wdewad 
       </div> 
      </div> 
      <div class="col-lg-3"> 
       <div class="well"> 
        <img src="http://www.verticalresponse.com/blog/wp-content/uploads/2013/02/blogimg1-620x350.jpg" /> 
        <hr /> 
        dwadwada<br />wdewad 
       </div> 
      </div> 
      <div class="col-lg-3"> 
       <div class="well">dwadwada<br />wdewad</div> 
      </div> 
      <div class="col-lg-3"> 
       <div class="well">dwadwada<br />wdewad</div> 
      </div> 
      <div class="col-lg-3"> 
       <div class="well"> 
        <img src="http://www.verticalresponse.com/blog/wp-content/uploads/2013/02/blogimg1-620x350.jpg" /> 
        <hr /> 
        dwadwada<br />wdewad 
       </div> 
      </div> 
     </div> 

Я пытался в течение нескольких часов, и теперь я любопытное потерял о том, как я могу это сделать. Я буду принимать anykind помощи: jquery, плагины, css или что-нибудь еще.

Спасибо за ваше время и помощь.

+0

Вы должны использовать плагины использования, такие как: http://www.wookmark.com/jquery-plugin – ketan

+0

И еще один http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout- jquery-plugin/ – ketan

+0

и http://masonry.desandro.com/ .. – wooer

ответ

0

Вы должны использовать некоторые доступные плагины JQuery, как: wookmark, Blocklist.. Используя эти плагины, вы можете легко организовать то, что хотите.

masonry - еще один, чтобы достичь этого.

0

Вы можете применить встроенный дисплей для внутренних разделов, но это не является правильным решением. Если вы сильно ограничены в использовании css, попробуйте это:

.blog-post-holder > div { 
    display: inline; 
} 

В противном случае используйте плагины jQuery, предложенные выше. Я бы предпочел masonry, так как с ним легче работать.

Смежные вопросы