引導填充欄之間的空白處

起初，對不起我的英文。我想用不同的塊創建一個html頁面。但是，當某個塊更高時，另一個塊會在高度上留下空白區域。引導填充欄之間的空白處

已經嘗試使它們浮動，並已在互聯網上搜索，但沒有成功。

我希望有人能幫助我。這裏是我當前的代碼

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-9"> 
 
      <div class="darkContainer"> 
 
      <h4>Information</h4> 
 
      <small></small> 
 
      <p> 
 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
      </p> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-3"> 
 
      <div class="lightContainer"> 
 
      <h4>Information</h4> 
 
      <small></small> 
 
      <p> 
 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
      </p> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-5"> 
 
      <div class="darkContainer"> 
 
      <h4>Information</h4> 
 
      <small></small> 
 
      <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
      </p> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <div class="darkContainer"> 
 
      <h4>Information</h4> 
 
      <small></small> 
 
      <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
      </p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div>

來源

2016-12-16 PlantedRabbit70

您正在使用bootstrap網格錯誤。我會把主柵格分成9列和3列。 – Troyer

的問題是你有沒有分列引導正確。您必須將它分爲col-9和col-3，然後將所有內容放入列中。下面的代碼可以爲你

<div class="container"> 
<div class="row"> 
    <div class="col-md-12"> 

    <div class="col-md-9"> 

     <div class="darkContainer col-md-12"> 
     <h4>Information</h4> 
     <small></small> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
     </div> 

     <div class="col-md-7"> 
     <div class="darkContainer"> 
     <h4>Information</h4> 
     <small></small> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
     </div> 
    </div> 
    <div class="col-md-5"> 
     <div class="darkContainer"> 
     <h4>Information</h4> 
     <small></small> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
     </div> 
    </div> 

    </div> <!-- col-9 --> 

    <div class="col-md-3"> 
     <div class="lightContainer col-md-12"> 
     <h4>Information</h4> 
     <small></small> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </p> 
     </div> 
    </div> 
    </div> <!-- col-12--> 
</div>

在這裏工作是演示 DEMO

祝您好運！

來源

2016-12-16 08:07:53

你可以做的是使用CSS和top或left和rightbottom。這使您可以將元素放置在頁面的任何位置。

來源

2016-12-16 00:27:23

不幸的是，你還不能解決這個問題（只使用標準的Bootstrap CSS）。

也許引導4將解決這個問題。

無論如何，你可以用Javascript解決它，選擇所有div的內部div.row，並設置更大的子div高度給所有其他孩子。

也許跟隨例如將運行：

var divs = $('div.row > div'); 
var h = 0; 
$.each(divs, function(i, item) { 
    if ($(item).height() > h) { 
     h = $(item).height(); 
    } 
} 
$('div.row > div').height(h);

來源

2016-12-16 00:27:58

引導填充欄之間的空白處

回答

相關問題