带边栏的砌体 - 引导程序

页面应分为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

带边栏的砌体 - 引导程序

回答

相关问题