带边栏的砌体 - Bootstrap [英] Masonry with Sidebar - Bootstrap

查看：89
本文介绍了带边栏的砌体 - Bootstrap的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

该页面应分为4行。砌体应该对齐3排内的职位。右侧会显示侧边栏。这应该是在最后一行。



然而，砌体混合一切，不会让我在右边有一个边栏。

HTML 

 < div类= 容器 > 
< div id =masonry-containerclass =row nomargin> 
< div class =col-md-9> 
< div class =item col-lg-4 col-md-4 col-sm-4> 
 <！--- ---内容--->> 
< / div> 
< / div> 
< div class =item col-lg-3 col-md-4 col-sm-3 col-xs-12 rightfloat> 
 <！--- ---边栏---> 
< / div> 
< / div> 
< / div>

要清除它， .rightfloat 是一个类为 float：right;



所以泥工会将内容与边栏混合。如果难以理解，请请大家看看。我曾尝试更改HTML和一些CSS，但没有解决问题。



我也尝试在侧边栏中使用以下内容：

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

这使侧栏浮动到右侧，但是它落后于其他内容。



页面可在此处找到。



您是否有解决方案或任何想法？

问题？请问。

解决方案

好像你需要嵌套你的列，以便你的侧边栏和砌体网格有明显的分离。现在（如您所述），它在砌体网格中混合，因此添加的任何新列都会干扰侧边栏的放置。



请参见嵌套列



或者，您可以创建一个如果您希望它被修复，则不需要使用列。



FullPage中嵌套列的侧栏。 



 
  html，body {margin：0;填充：0;宽度：100％;身高：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;宽度：100％;身高：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 =stylesheet/>< nav class =navbar navbar -default navbar-fixed-toprole =navigation> < div class =container> < div class =navbar-header> < button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =＃navbar-collapse> < span class =sr-only>切换导航< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < /按钮> < a class =navbar-brandhref =＃>品牌< / a> < / DIV> < div class =collapse navbar-collapseid =navbar-collapse> < ul class =nav navbar-nav navbar-right> < li>< a href =＃>连结< / a> < /锂> < / 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/350x450alt =...> < div class =caption> < h3>缩略图标签< / h3> < p>一些文字< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-6 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/350x350alt =...> < div class =caption> < h3>缩略图标签< / h3> < p> Lorem Ipsum只是印刷和排版行业的虚拟文本。< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-6 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/350x350alt =...> < div class =caption> < h3>缩略图标签< / h3> < p> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum只是印刷和排版行业的虚拟文本。< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-6 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/350x450alt =...> < div class =caption> < h3>缩略图标签< / h3> < p> Lorem Ipsum只是印刷和排版行业的虚拟文本。< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-6 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/350x350alt =...> < div class =caption> < h3>缩略图标签< / h3> < p>一些文字< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-6 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/450x350alt =...> < div class =caption> < h3>缩略图标签< / h3> < p>一些文字< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-6 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/350x350alt =...> < div class =caption> < h3>缩略图标签< / h3> < p>一些文字< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-6 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/450x350alt =...> < div class =caption> < h3>缩略图标签< / h3> < p>一些文字< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-6 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/350x350alt =...> < div class =caption> < h3>缩略图标签< / h3> < p>一些文字< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-6 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/450x350alt =...> < div class =caption> < h3>缩略图标签< / h3> < p>一些文字< / p> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < div class =col-sm-3> < div class =sidebar> < H4>侧边栏< / h4> < p为H.文字< br> 20. 2016年1月< / p> < p为H.文字< br> 20. 2016年1月< / p> < p为H.文字< br> 20. 2016年1月< / p> < p为H.文字< br> 20. 2016年1月< / p> < p为H.文字< br> 20. 2016年1月< / p> < p为H.文字< br> 20. 2016年1月< / p> < p为H.文字< br> 20. 2016年1月< / p> < / DIV> < / DIV> < / div>< / div>

Sidebar在FullPage中的固定位置示例。



$（'＃masonry-container'）。imagesLoaded（function（）{$（ '＃masonry-container'）。masonry（{itemSelector：'.item'，isAnimated：true}）;}）; 

  html，body {margin：0;填充：0;宽度：100％;身高：100％;} body {padding-top：50px; overflow-x：hidden;}。sidebar-fixed {margin-top：50px; padding：0px 5px;位置：固定;宽度：150px;身高：100％; top：0;正确：0;颜色：＃777;}。main-content {margin-right：150px;}＃masonry-container {width：100％; width：100％;}。item {padding：10px;}。thumbnail img {width：100％;} @ media（max-width：768px）{.sidebar-fixed {width：100px; } .main-content {margin-right：100px;填充：0; }} @ media（max-width：480px）{.sidebar-fixed {position：relative;宽度：100％;身高：100％; } .main-content {margin-right：auto;填充：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 =stylesheet/>< nav class =navbar navbar-default navbar-固定顶部角色=导航> < div class =container> < div class =navbar-header> < button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =＃navbar-collapse> < span class =sr-only>切换导航< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < /按钮> < a class =navbar-brandhref =＃>品牌< / a> < / DIV> < div class =collapse navbar-collapseid =navbar-collapse> < ul class =nav navbar-nav navbar-right> < li>< a href =＃>连结< / a> < /锂> < / 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/350x450alt =...> < div class =caption> < h3>缩略图标签< / h3> < p>一些文字< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-12 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/350x350alt =...> < div class =caption> < h3>缩略图标签< / h3> < p> Lorem Ipsum只是印刷和排版行业的虚拟文本。< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-12 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/350x350alt =...> < div class =caption> < h3>缩略图标签< / h3> < p> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum只是印刷和排版行业的虚拟文本。< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-12 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/350x450alt =...> < div class =caption> < h3>缩略图标签< / h3> < p> Lorem Ipsum只是印刷和排版行业的虚拟文本。< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-12 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/350x350alt =...> < div class =caption> < h3>缩略图标签< / h3> < p>一些文字< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-12 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/450x350alt =...> < div class =caption> < h3>缩略图标签< / h3> < p>一些文字< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-12 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/350x450alt =...> < div class =caption> < h3>缩略图标签< / h3> < p> Lorem Ipsum只是印刷和排版行业的虚拟文本。< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-12 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/350x350alt =...> < div class =caption> < h3>缩略图标签< / h3> < p>一些文字< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-12 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/450x350alt =...> < div class =caption> < h3>缩略图标签< / h3> < p>一些文字< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-12 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/350x450alt =...> < div class =caption> < h3>缩略图标签< / h3> < p> Lorem Ipsum只是印刷和排版行业的虚拟文本。< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-12 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/350x350alt =...> < div class =caption> < h3>缩略图标签< / h3> < p>一些文字< / p> < / DIV> < / DIV> < / DIV> < div class =col-xs-12 col-sm-4 item> < div class =thumbnail> < img src =http://placehold.it/450x350alt =...> < div class =caption> < h3>缩略图标签< / h3> < p>一些文字< / p> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < div class =sidebar-fixed> < H4>侧边栏< / h4> < p为H.文字< br> 20. 2016年1月< / p> < p为H.文字< br> 20. 2016年1月< / p> < p为H.文字< br> 20. 2016年1月< / p> < p为H.文字< br> 20. 2016年1月< / p> < p为H.文字< br> 20. 2016年1月< / p> < p为H.文字< br> 20. 2016年1月< / p> < p为H.文字< br> 20. 2016年1月< / p> < / div>< / div>

The page should be divided into 4 rows. Masonry should align the posts within 3 rows. At the right the sidebar is going to be shown. This should be within the last row.

However, Masonry mix everything and won't let me have a sidebar at the right.

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>

To clear it up, .rightfloat is a class for float: right;

So Masonry mix the content with the sidebar. Please take a look if it's hard to understand. I have tried changing the HTML and some CSS, but nothing solves the problem.

I have also tried using the following with the sidebar:

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

This made the sidebar float to the right, but then it's behind the other content.

Page can be found here.

Do you have a working solution or any ideas?

Question? Please ask.

解决方案

It seems like you need to nest your columns so your have a distinct separation of your sidebar and your masonry grid. Right now (as you stated), it's mixed within the masonry grid so any new column(s) that are added will disturb the placement of the sidebar.

See Nesting Columns

Alternatively you could create a sidebar by itself without the use of columns in the event that you want it fixed.

Sidebar inside nested columns at 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>

Sidebar fixed position example at 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;
}
.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>

这篇关于带边栏的砌体 - Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆