Система сетки бутстрапа col с двумя высокими

-1

Как достичь настройки, показанной в this image с использованием системы сетки Bootstrap? Зеленые прямоугольники представляют собой панели Bootstrap, а оранжевый прямоугольник представляет собой Bootstrap Jumbotron.Система сетки бутстрапа col с двумя высокими

(Не беспокоить текст в изображении)

Это код, у меня есть на данный момент (%%% %%% CONTENT заменяются PHP, так что не беспокоить их):

<div class="jumbotron" style="background-color:rgba(231,231,231,0.5);"> 
     <div class="container"> 
      <h1>%%%JUMBOTRON%%%</h1> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-3"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading">%%%TITEL%%%</div> 
       <div class="panel-body"> 
        %%%CONTENT%%% 
       </div> 
      </div> 
     </div> 
     <div class="col-md-9"> 
      <div class="row"> 
       <div class="col-md-8"> 
        <div class="panel panel-primary"> 
         <div class="panel-heading">%%%TITEL%%%</div> 
         <div class="panel-body"> 
          %%%CONTENT%%% 
         </div> 
        </div> 
       </div> 
       <div class="col-md-4"> 
        <div class="panel panel-primary"> 
         <div class="panel-heading">%%%TITEL%%%</div> 
         <div class="panel-body"> 
          %%%CONTENT%%% 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6"> 
        <div class="panel panel-primary"> 
         <div class="panel-heading">%%%TITEL%%%</div> 
         <div class="panel-body"> 
          %%%CONTENT%%% 
         </div> 
        </div> 
       </div> 
       <div class="col-md-6"> 
        <div class="panel panel-primary"> 
         <div class="panel-heading">%%%TITEL%%%</div> 
         <div class="panel-body"> 
          %%%CONTENT%%% 
         </div> 
        </div> 
       </div> 
      </div> 
     </div>

источник

2015-10-30 SuperJordir

Я пытался искать, но я не знаю, как правильно слово Это. Я пробовал код этого вопроса: [link] (http://stackoverflow.com/questions/26441642/css-inline-blocks-and-bootstrap-grid-system-output?rq=1) – SuperJordir

Хорошо, я обновил с кодом, который у меня есть на данный момент. – SuperJordir

ваша структура должна быть: -Nav -Jumbotron -строка разделены в 2-х половин -The вторая половина содержит 2 строки полной ширины

что-то simmilar к этому:

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <!-- ... rest of your nav configuration --> 
</nav> 

<div class="jumbotron"> 
    <div class="container"> 
    <h1>Jumbo!</h1> 
    </div> 
</div> 

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      left side 
     </div> 
     <div class="col-md-6"> 
      <div class="row"> 
       <div class="col-md-12"> 
        right side 1 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12"> 
        right side 2 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

источник

2015-10-30 17:20:38 FabioG

Ниже приведен пример использования панели, как описано в оригинальный вопрос:

<div class="row"> 
    <div class="jumbotron" style="background-color:rgba(231,231,231,0.5);"> 
    <div class="container"> 
     <h1>%%%JUMBOTRON%%%</h1> 
    </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="container"> 
    <div class="col-md-6"><!--Column Left--> 
     <div class="panel-group"> 
     <div class="panel panel-primary"> 
      <div class="panel-heading">%%%TITLE%%%</div> 
      <div class="panel-body">%%%CONTENT%%%<br/>Note: The height of this panel is independent of the others<br/>You could set the height using CSS if needed.</div> 
     </div> 
     </div> 
    </div><!--End Column Left--> 

    <div class="col-md-6"><!--Column Right--> 
     <div class="panel-group"> 
     <div class="panel panel-success"> 
      <div class="panel-heading">%%%TITLE%%%</div> 
      <div class="panel-body">%%%CONTENT%%%</div> 
     </div> 
     <div class="panel panel-success"> 
      <div class="panel-heading">%%%TITLE%%%</div> 
      <div class="panel-body">%%%CONTENT%%%</div> 
     </div> 
     </div> 
    </div><!--End Column Right--> 
    </div><!--End Container--> 
</div><!--End Row-->

источник

2015-10-30 17:32:09

Система сетки бутстрапа col с двумя высокими

ответ

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