проблема с дополнением bootstrap 3.0 equalHeights

Question

проблема с дополнением bootstrap 3.0 equalHeights

0

когда я изменяю размер моей страницы до мобильного вида, так что это одна ячейка для каждой строки. У меня нет прокладки между областями, так что в настоящее время все они сливаются в одну - есть ли все-таки я могу исправить это и добавить разрыв между ними?

http://jsfiddle.net/4v3u4/7/

<div class="container">
<div class="row">
  <div id="equalheight">      

      <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">

            <div class="test">  

                <div class="info-block"><!-- BODY BOX-->
                    <p>one line of copy</p>
                </div>

            </div>              
      </div>  

      <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
          <div class="test">    
              <div class="info-block"><!-- BODY BOX-->                
                  <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                  Quisque mauris augue</p>
              </div>
          </div>
      </div>  

          <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
              <div class="test">    
                  <div class="info-block"><!-- BODY BOX-->                
                      <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                      Quisque mauris augue</p>
                  </div>
              </div>
          </div>  

          <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
              <div class="test">    
                  <div class="info-block"><!-- BODY BOX-->                
                      <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                      Quisque mauris augue</p>
                  </div>
              </div>
          </div>              

      </div>
  </div><!--/row-->
  <hr>
  <div class="row">
      <div id="equalheight">      

          <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
              <div class="info-block"><!-- BODY BOX-->
                  <p>one line of copy</p>
              </div>
          </div>  

          <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
              <div class="info-block"><!-- BODY BOX-->
                  <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                  Quisque mauris augue</p>
              </div>
          </div>  

          <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
              <div class="info-block"><!-- BODY BOX-->
                  <p>one line of copy</p>
              </div>
          </div>  

          <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
              <div class="info-block"><!-- BODY BOX-->
                  <p>one line of copy</p>
              </div>
          </div>              

      </div>
   </div><!--/row-->
</div>




body {
margin: 0;
font-size: 15px;
color: #005f6b;
background-color: #ddeaf3;
padding-top: 72px;
}

.navbar-brand {
  float: left;
  display: block;
  padding: 0px 20px 0px;
  margin-left: -20px;
  font-size: 24px;
  line-height: 40px;
  color: #53564e;
  text-shadow: 2px 2px 1px #fff;
  text-transform: uppercase;
  font-weight: 400;
}

/* Top Navigations links styles */
#top-navigation > ul.nav > li > a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 18px;
}

.demo{
    //background-color:#000;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

#equalheight {
    overflow: hidden; 
}

.test{
    background-color:#efefef;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

.info-block{
    padding: 14px;
}

Любая помощь приветствуется, приветствует

Ryan Michael 07 нояб. 2013, в 11:33

Источник

Теги:

html

css

twitter-bootstrap-3

1 ответ

Ещё вопросы

ZimTis · Accepted Answer · 2013-11-07T07-54-00.000Z

Вы должны изменить поведение тестового класса в запросах бутстрапов. я добавить

@media(max-width:767px){
    .test{
        margin: 15px 0px;
        padding: 0px
    }
}

до конца Css, и он работает. играть на скрипке

Но есть ли причина, почему вы используете?

margin-bottom: -99999px;
padding-bottom: 99999px;

Спасибо за это. Причина, по которой я использую 99999, заключалась в том, чтобы ящики в ряду были одинаковой высоты. Я попытался использовать плагин jQuery (equalHeights), но не смог обновить его в window.resize или во время обновления ajax. Нить, где кто-то предложил выше, находится здесь> stackoverflow.com/questions/19819816/…