带侧边栏的砌体 - Bootstrap

Question

页面应分为 4 行。砌体应将柱子对齐在 3 行以内。在右侧将显示侧边栏。这应该在最后一行。

然而，Masonry 混合了所有东西，不让我在右边有侧边栏。

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 是 class for float: right;

因此 Masonry 将内容与侧边栏混合在一起。 Please take a look如果很难理解。我试过更改 HTML 和一些 CSS，但没有解决问题。

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

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

这使侧边栏向右浮动，但它位于其他内容的后面。

Page can be found here.

您有可行的解决方案或任何想法吗？

问题？请教

Answer 1

您似乎需要嵌套列，以便将侧边栏和砖石网格明显分开。现在（如您所说），它混合在砌体网格中，因此添加的任何新列都会扰乱侧边栏的位置。

见Nesting Columns

或者，如果您希望修复它，您可以自己创建一个侧边栏，而不使用列。

全页嵌套列内的边栏。

$('#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>

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

Masonry with Sidebar - Bootstrap

html

jquery

jquery-masonry

twitter-bootstrap

masonry