網格佈局採用磚石和引導

我試圖做一個網頁，其中看起來有點像這樣在桌面上網格佈局採用磚石和引導

而且它將有用於移動設備的一列布局。首先是圖片，然後是長文字，然後是廣告客戶，然後是評論。

問題是，中間有很多負面空間。我想要一個級聯的網格佈局，就像砌體所做的一樣，並且還可以輕鬆使用引導列來響應元素的大小調整。我知道這可以通過很多媒體查詢來完成，但我想知道是否有方法將引導程序和砌石結合起來以最小的努力達到效果。剛開始使用都爲bootsrap和磚石類不工作，因爲這是我到現在爲止：

正如你可以看到，有一個巨大的負空間。 Clearfix也無法工作。這裏是我的代碼現在：

<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    </head> 
 
    <body> 
 
    
 
    <div class="container"> 
 
    <div class="row grid"> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 bg-primary grid-item"> 
 
    <img src="https://cdn.spacetelescope.org/archives/images/large/heic1307a.jpg" style="width: 100%"> 
 
    Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese. 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 bg-info grid-item"> 
 
    <p> 
 
    Ricotta monterey jack cow. Paneer cheese and biscuits everyone loves fromage frais monterey jack caerphilly camembert de normandie lancashire. Danish fontina everyone loves pepper jack lancashire hard cheese bocconcini edam cheese and wine. Cheese and wine manchego rubber cheese blue castello blue castello rubber cheese queso cheesy grin. Say cheese pecorino smelly cheese halloumi cheesy feet cheese slices ricotta croque monsieur. Blue castello parmesan caerphilly mozzarella bavarian bergkase say cheese red leicester macaroni cheese. Edam cheese strings camembert de normandie cheese and wine red leicester gouda cream cheese everyone loves. Cheddar who moved my cheese manchego chalk and cheese boursin lancashire. 
 
    </p> 
 
    <p> 
 
    Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese. Taleggio squirty cheese croque monsieur macaroni cheese fondue cheddar bavarian bergkase st. agur blue cheese. St. agur blue cheese cottage cheese swiss everyone loves swiss dolcelatte babybel monterey jack. Gouda monterey jack fromage feta taleggio cheese triangles parmesan cheddar. Rubber cheese fromage frais stinking bishop boursin red leicester camembert de normandie fromage frais gouda. Halloumi ricotta port-salut hard cheese squirty cheese cheese slices brie. 
 
    </p> 
 
    <p> 
 
    Babybel cheese on toast feta. Ricotta dolcelatte mozzarella cheese and wine goat rubber cheese cheesy feet cheesy feet. Boursin stinking bishop cheesecake bocconcini mascarpone cut the cheese bocconcini cut the cheese. Hard cheese fromage caerphilly cheeseburger cheese on toast emmental bocconcini bocconcini. Ricotta cheese strings cheese and wine camembert de normandie cut the cheese feta babybel bocconcini. Cauliflower cheese lancashire parmesan everyone loves cheese and wine cauliflower cheese mascarpone when the cheese comes out everybody's happy. Fromage cheese and biscuits. 
 
    </p> 
 
    <p> 
 
    Mozzarella queso emmental. Queso manchego gouda blue castello blue castello macaroni cheese mozzarella roquefort. Who moved my cheese cauliflower cheese caerphilly mozzarella cut the cheese the big cheese say cheese rubber cheese. Cheeseburger mozzarella emmental paneer blue castello taleggio who moved my cheese cream cheese. Croque monsieur cheese triangles cheddar halloumi cheesecake goat queso fromage. Airedale who moved my cheese cheesy grin cheese and biscuits pepper jack chalk and cheese cheese slices. 
 
    </p> 
 
    <p> 
 
    Squirty cheese mascarpone lancashire. Cottage cheese mozzarella st. agur blue cheese squirty cheese brie pecorino danish fontina smelly cheese. Babybel cheese and wine bavarian bergkase gouda bocconcini stinking bishop macaroni cheese gouda. Lancashire cheese strings chalk and cheese cheesecake mozzarella monterey jack the big cheese monterey jack. Goat who moved my cheese cheese on toast danish fontina pepper jack gouda queso the big cheese. Airedale monterey jack airedale cauliflower cheese. 
 
    </p> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 bg-success grid-item"> 
 
    Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese. 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 bg-danger grid-item"> 
 
    Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese. 
 
    </div> 
 
    </div> 
 
    </div> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    <script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script> 
 
    </body>

任何幫助表示讚賞。謝謝。

來源

2017-03-25 Archon

關於Flexbox的是什麼？ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – DanEpp

在這裏參與砌體的實際需求是什麼？它在我看來可以用簡單的Bootstrap列來完成？ – mayersdesign

我只用引導列嘗試過，但沒有成功。沒有真正的強制使用砌體，我只想要這個工作@mayersdesign – Archon

這是你想要的石工解決方案。還有更多的技術來清除這個空白區域。

刪除&添加：刪除清除div和img寬度添加bootstrap默認img響應。

重要：bootstrap網格系統的每行包含12列。

$(document).ready(function(){ 
 
$('.grid').masonry({ 
 
    // options 
 
    itemSelector: '.grid-item', 
 
    columnWidth: '.grid-item', 
 
    percentPosition: true 
 
}); 
 
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<body> 
 
<div class="container"> 
 
<div class="row grid"> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 bg-primary grid-item"> 
 
    <img src="https://cdn.spacetelescope.org/archives/images/large/heic1307a.jpg" class="img-responsive" /> 
 
    Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese. 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 bg-info grid-item"> 
 
    <p> \t Ricotta monterey jack cow. Paneer cheese and biscuits everyone loves fromage frais monterey jack caerphilly camembert de normandie lancashire. Danish fontina everyone loves pepper jack lancashire hard cheese bocconcini edam cheese and wine. Cheese and wine manchego rubber cheese blue castello blue castello rubber cheese queso cheesy grin. Say cheese pecorino smelly cheese halloumi cheesy feet cheese slices ricotta croque monsieur. Blue castello parmesan caerphilly mozzarella bavarian bergkase say cheese red leicester macaroni cheese. Edam cheese strings camembert de normandie cheese and wine red leicester gouda cream cheese everyone loves. Cheddar who moved my cheese manchego chalk and cheese boursin lancashire. 
 
    </p> 
 
    <p>Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese. Taleggio squirty cheese croque monsieur macaroni cheese fondue cheddar bavarian bergkase st. agur blue cheese. St. agur blue cheese cottage cheese swiss everyone loves swiss dolcelatte babybel monterey jack. Gouda monterey jack fromage feta taleggio cheese triangles parmesan cheddar. Rubber cheese fromage frais stinking bishop boursin red leicester camembert de normandie fromage frais gouda. Halloumi ricotta port-salut hard cheese squirty cheese cheese slices brie. \t 
 
    </p> 
 
    <p>Babybel cheese on toast feta. Ricotta dolcelatte mozzarella cheese and wine goat rubber cheese cheesy feet cheesy feet. Boursin stinking bishop cheesecake bocconcini mascarpone cut the cheese bocconcini cut the cheese. Hard cheese fromage caerphilly cheeseburger cheese on toast emmental bocconcini bocconcini. Ricotta cheese strings cheese and wine camembert de normandie cut the cheese feta babybel bocconcini. Cauliflower cheese lancashire parmesan everyone loves cheese and wine cauliflower cheese mascarpone when the cheese comes out everybody's happy. Fromage cheese and biscuits. 
 
    </p> 
 
    <p>Mozzarella queso emmental. Queso manchego gouda blue castello blue castello macaroni cheese mozzarella roquefort. Who moved my cheese cauliflower cheese caerphilly mozzarella cut the cheese the big cheese say cheese rubber cheese. Cheeseburger mozzarella emmental paneer blue castello taleggio who moved my cheese cream cheese. Croque monsieur cheese triangles cheddar halloumi cheesecake goat queso fromage. Airedale who moved my cheese cheesy grin cheese and biscuits pepper jack chalk and cheese cheese slices. 
 
    </p> 
 
    <p>Squirty cheese mascarpone lancashire. Cottage cheese mozzarella st. agur blue cheese squirty cheese brie pecorino danish fontina smelly cheese. Babybel cheese and wine bavarian bergkase gouda bocconcini stinking bishop macaroni cheese gouda. Lancashire cheese strings chalk and cheese cheesecake mozzarella monterey jack the big cheese monterey jack. Goat who moved my cheese cheese on toast danish fontina pepper jack gouda queso the big cheese. Airedale monterey jack airedale cauliflower cheese. 
 
    </p> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 bg-success grid-item"> 
 
    Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese. 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 bg-danger grid-item"> 
 
    Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese.Boursin stilton caerphilly. Cheddar macaroni cheese fromage frais macaroni cheese cheesecake halloumi emmental smelly cheese. 
 
    </div> 
 
    </div> 
 
    </div> 
 
</body>

來源

2017-03-25 11:53:04

謝謝。這似乎工作。 – Archon

網格佈局採用磚石和引導

回答

相關問題