Bootstrap make column fit

У меня есть загрузочная страница, где я испытываю одну незначительную проблему. Проблема в рабочем режиме, один столбец не достигает области, в которой он нуждается. Если я изменяю высоту в css, он толкает два других divа вниз. Как заставить Top div достигать нижней области, где секция инструментов заканчивается без нажатия угла и инструментов вниз? Возможно ли это с помощью бутстрапа?Bootstrap make column fit

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body style="background:#F8F8F8;"> 
 
    <p> 
 
     <br/> 
 
    </p> 
 

 
    <div class="container-fluid"> 
 

 
     <nav role="navigation" class="navbar navbar-inverse navbar-fixed-top"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <div class="navbar-header"> 
 

 
       <a href="" class="navbar-brand"> 
 
        <img alt="" src="image.png" height="22" width="81" /> 
 
       </a> 
 
      </div> 
 
      <!-- Collection of nav links, forms, and other content for toggling --> 
 
      <div id="navbarCollapse" class="collapse navbar-collapse"> 
 
       <ul class="nav navbar-nav navbar-left"> 
 

 

 
       </ul> 
 
      </div> 
 
     </nav> 
 
     <BR> 
 
     <BR> 
 
     <div class="row"> 
 
      <div class="col-md-4" "col-xs-12"> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         <div class="welcome"> 
 
          <div id="container"> 
 
     Test info 
 

 
          </div> 
 

 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-4" "col-xs-4"> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         <div class="prescription"> 
 
          <div id="container"> 
 
           PL 
 
          </div> 
 

 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-4" "col-xs-4"> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         <div class="profile"> 
 
          <div id="container"> 
 
           Profile 
 
          </div> 
 

 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 

 
      <div class="col-md-3"> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         <div class="ghabox"> 
 
          <div id="container2"> 
 
           Ask 
 
          </div> 
 

 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         <div class="ghabox"> 
 
          <div id="container2"> 
 
           Discussions 
 
          </div> 
 

 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-6" "col-xs-4"> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         <div class="contributors"> 
 
          <div id="container2"> 
 
           Top 
 
          </div> 
 

 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         <div class="ghabox"> 
 
          <div id="container2"> 
 
           Corner 
 
          </div> 
 

 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-3"> 
 
       <div class="panel panel-default"> 
 
        <div class="panel-body"> 
 
         <div class="ghabox"> 
 
          <div id="container2"> 
 
           Tools 
 
          </div> 
 

 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 

 

 

 

 

 

 
     </div> 
 

 

 

 
    </div> 
 
    </div>

источник

2016-06-05 vzupo

Это: http://getbootstrap.com/css/#grid-nesting – dippas

Пожалуйста, просмотрите вид рабочего стола этого. Я хочу, чтобы только верхняя высота div расширялась, чтобы достичь той же области, что и другие два конца. Если я отрегулирую высоту css для этого div, он сдвинет остальные 2 div. Как я могу выполнить это, не отталкивая их. Кто-то, пожалуйста, укажите образец, который работает на рабочем столе. – vzupo

@dippas ваш ответ помог - thx – vzupo

После прочтения сайта вложенности сайта сетки на начальной загрузке, у меня есть решение.

`<div class="container"><div class="row"><div class="col-sm-9"><div class="row"><div class="col-sm-6" style="height:100px;backgroundcolor:lightblue;"></div><div class="col-sm-6" style="height:100px;background-color:white;"></div></div><div class="row"><div class="col-sm-12" style="height:150px;background-color:red;"></div></div><div class="row"><div class="col-sm-4" style="height:150px;background-color:orange;"</div><div class="col-sm-4" style="height:150px;background-color:yellow;"</div><div class="col-sm-4" style="height:150px;background-color:green;"></div></div></div><div class="col-sm-3" style="background-color:black;height:400px;"></div>

источник

2016-06-10 13:57:57 vzupo

Если я правильно понял ваш вопрос правильно, угловые и инструменты DIV должен быть внутри Top DIV для Top ДИВ, чтобы обернуть вокруг них.

<div class="col-md-6" "col-xs-4"> 
    <div class="panel panel-default"> 
     <div class="panel-body"> 
     <div class="contributors"> 
      <div id="container2"> 
      Top 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="panel panel-default"> 
      <div class="panel-body"> 
       <div class="ghabox"> 
       <div id="container2"> 
        Corner 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="panel panel-default"> 
      <div class="panel-body"> 
       <div class="ghabox"> 
       <div id="container2"> 
        Tools 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div>

Смотрите эту plunker

источник

2016-06-06 00:30:20

Bootstrap make column fit

ответ

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