Masonry with Sidebar - Bootstrap

问题

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.

回答1:

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>

来源：https://stackoverflow.com/questions/34953248/masonry-with-sidebar-bootstrap

标签

jquery

html

twitter-bootstrap

jquery-masonry

masonry