Как сделать этот макет в Bootstrap 3?

Я немного застрял с созданием этого макета в сетке Bootstrap 3'S:Как сделать этот макет в Bootstrap 3?

http://oi62.tinypic.com/142sjt0.jpg (не могли бы разместить изображение здесь из-за репутации)

Это где я получил до: http://www.bootply.com/7VrPUQwFAV

<div class="container">       

<div class="row"> 

          <div class="col-sm-3"> 
          <a href="#"><img class="img-responsive" src="http://placehold.it/263x263" alt=""></a> 
          <a href="#"><img class="img-responsive padding-top-30" src="http://placehold.it/263x556" alt=""></a> 
          </div> 


          <div class="col-sm-6"> 
          <a href="#"><img class="img-responsive" src="http://placehold.it/555x555" alt=""></a> 

          <div class="row"> 


          <div class="col-sm-12 col-sm-offset-6"> 
          <a href="#"><img class="img-responsive padding-top-30" src="http://placehold.it/555x263" alt=""></a> 
          </div> 

          </div> 

          </div> 


          <div class="col-sm-3"> 
          <a href="#"><img class="img-responsive" src="http://placehold.it/526x526" alt=""></a> 
          <a href="#"><img class="img-responsive padding-top-30" src="http://placehold.it/526x526" alt=""></a> 
          </div> 

          </div> 

</div>

Может ли кто-нибудь помочь?

источник

2015-03-05 Anonymous

На самом деле это не то, на что была рассчитана система сетки Bootstrap. Подумайте об использовании библиотеки, такой как [kason] (http://masonry.desandro.com/), которая построит вашу сетку для вас и позволит быстро реагировать. – harryg

Я действительно рассматривал масонство, но клиент хочет, чтобы сетка осталась прежней, вы говорите, что этот тип макета невозможно с сеткой? –

Вы должны иметь возможность сделать сетку той же. Просто определите ширину и высоту css (вы можете использовать 'col - * - *' для ширины), и кладка будет соответствовать им вместе. Возможно, вам придется немного настроить порядок, чтобы получить то, что вы хотите. Не сказать, что это невозможно с помощью только бутстрапа, но сложнее. – harryg

<div class="container"> 
     <div class="row"> 
      <div class="col-sm-3"> 
       <a href="#"><img class="img-responsive" src="http://placehold.it/263x263" alt=""></a> 
       <a href="#"><img class="img-responsive padding-top-30" src="http://placehold.it/263x556" alt=""></a> 
      </div> 
      <div class="col-sm-9"> 
       <div class="row"> 
        <div class="col-sm-8"> 
         <a href="#"><img class="img-responsive" src="http://placehold.it/555x555" alt=""></a> 
        </div> 
        <div class="col-sm-4"> 
         <a href="#"><img class="img-responsive" src="http://placehold.it/263x263" alt=""></a> 
         <a href="#"><img class="img-responsive" src="http://placehold.it/263x263" alt=""></a> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-sm-4"> 
         <a href="#"><img class="img-responsive" src="http://placehold.it/263x263" alt=""></a> 
        </div> 
        <div class="col-sm-8"> 
         <a href="#"><img class="img-responsive" src="http://placehold.it/555x263" alt=""></a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div>

источник

2015-03-05 11:35:40

Довольно хорошее решение, просто проблема при укладке на медные и мелкие –

сделать col-sm- * to col-xs- * –

Как сделать этот макет в Bootstrap 3?

ответ

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