帶邊欄的砌體 - 引導程序

頁面應分爲4行。砌體應該對齊3排內的職位。右側會顯示側邊欄。這應該在最後一行。帶邊欄的砌體 - 引導程序

然而，砌體混合一切，不會讓我有一個側邊欄在右邊。

HTML

<div class="container"> 
    <div id="masonry-container" class="row nomargin"> 
      <div class="col-md-9"> 
       <div class="item col-lg-4 col-md-4 col-sm-4"> 
        <!--- Content ---> 
       </div> 
      </div> 
      <div class="item col-lg-3 col-md-4 col-sm-3 col-xs-12 rightfloat"> 
       <!--- Sidebar ---> 
      </div> 
    </div> 
</div>

把它清除掉，.rightfloat是float: right;

類砌體所以混合與側邊欄的內容。如果難以理解，請致電Please take a look。我試圖改變HTML和一些CSS，但沒有解決問題。

我也使用與側邊欄下面的嘗試：

<div class="col-md-3 littluft rightfloat">

這讓側邊欄浮動的權利，但後來它的其他內容的後面。

Page can be found here。

你有一個工作解決方案或任何想法？

有問題？請問。

來源

2016-01-22 Olen

看起來你需要嵌套你的列，所以你有你的邊欄和你的石工網格明顯分離。現在（如您所述），它在砌體網格內混合，因此添加的任何新列將干擾側邊欄的放置。

見Nesting Columns

或者，也可以在不想要它固定的情況下使用的列本身創造一個側邊欄。

SidePage在FullPage的嵌套列內。

$('#masonry-container').imagesLoaded(function() { 
 
    $('#masonry-container').masonry({ 
 
    itemSelector: '.item', 
 
    isAnimated: true 
 
    }); 
 
});

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
body { 
 
    padding-top: 50px; 
 
    overflow-x: hidden; 
 
} 
 
#masonry-container { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.item { 
 
    padding: 10px; 
 
} 
 
.thumbnail img { 
 
    width: 100%; 
 
} 
 
.sidebar { 
 
    padding: 0px 30px; 
 
    width: 100%; 
 
    height: 100%; 
 
    color: #777; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.0/imagesloaded.pkgd.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-9"> 
 
     <div class="row"> 
 
     <div id="masonry-container"> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/350x450" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/350x350" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/350x350" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/350x450" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/350x350" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/450x350" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/350x350" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/450x350" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/350x350" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-6 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
       <img src="http://placehold.it/450x350" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-3"> 
 
     <div class="sidebar"> 
 
     <h4> 
 
      Sidebar 
 
     </h4> 
 
     <p> 
 
      Text 
 
      <br>20.Jan 2016 
 
     </p> 
 
     <p> 
 
      Text 
 
      <br>20.Jan 2016 
 
     </p> 
 
     <p> 
 
      Text 
 
      <br>20.Jan 2016 
 
     </p> 
 
     <p> 
 
      Text 
 
      <br>20.Jan 2016 
 
     </p> 
 
     <p> 
 
      Text 
 
      <br>20.Jan 2016 
 
     </p> 
 
     <p> 
 
      Text 
 
      <br>20.Jan 2016 
 
     </p> 
 
     <p> 
 
      Text 
 
      <br>20.Jan 2016 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

在整頁邊欄固定位置的例子。

$('#masonry-container').imagesLoaded(function() { 
 
    $('#masonry-container').masonry({ 
 
    itemSelector: '.item', 
 
    isAnimated: true 
 
    }); 
 
});

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
body { 
 
    padding-top: 50px; 
 
    overflow-x: hidden; 
 
} 
 
.sidebar-fixed { 
 
    margin-top: 50px; 
 
    padding: 0px 5px; 
 
    position: fixed; 
 
    width: 150px; 
 
    height: 100%; 
 
    top: 0; 
 
    right: 0; 
 
    color: #777; 
 
} 
 
.main-content { 
 
    margin-right: 150px; 
 
} 
 
#masonry-container { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.item { 
 
    padding: 10px; 
 
} 
 
.thumbnail img { 
 
    width: 100%; 
 
} 
 
@media (max-width: 768px) { 
 
    .sidebar-fixed { 
 
    width: 100px; 
 
    } 
 
    .main-content { 
 
    margin-right: 100px; 
 
    padding: 0; 
 
    } 
 
} 
 
@media (max-width: 480px) { 
 
    .sidebar-fixed { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    } 
 
    .main-content { 
 
    margin-right: auto; 
 
    padding: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.0/imagesloaded.pkgd.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 

 
<div class="container"> 
 
    <div class="main-content"> 
 
    <div class="container-fluid"> 
 

 
     <div id="masonry-container"> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/350x450" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/350x450" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x350" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/350x450" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x350" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/350x450" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/350x350" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="col-xs-12 col-sm-4 item"> 
 
      <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x350" alt="..."> 
 
      <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>Some Text</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <div class="sidebar-fixed"> 
 
    <h4> 
 
    Sidebar 
 
    </h4> 
 
    <p> 
 
     Text 
 
     <br>20.Jan 2016 
 
    </p> 
 
    <p> 
 
     Text 
 
     <br>20.Jan 2016 
 
    </p> 
 
    <p> 
 
     Text 
 
     <br>20.Jan 2016 
 
    </p> 
 
    <p> 
 
     Text 
 
     <br>20.Jan 2016 
 
    </p> 
 
    <p> 
 
     Text 
 
     <br>20.Jan 2016 
 
    </p> 
 
    <p> 
 
     Text 
 
     <br>20.Jan 2016 
 
    </p> 
 
    <p> 
 
     Text 
 
     <br>20.Jan 2016 
 
    </p> 
 
    </div> 
 
</div>

來源

2016-01-22 20:09:36 vanburen

非常感謝您對這樣的解釋的補充。它真的幫助我理解和解決問題。謝謝:) – Olen

不客氣，很高興我可以幫忙。 – vanburen

帶邊欄的砌體 - 引導程序

回答

相關問題