CODEWITHSUNDEEP
twitter-bootstrapjquery-masonrymasonry
user3434318
user3434318

Reputation: 3

Why does Masonry add a right margin to a layout with Twitter Bootstrap?

When using Masonry (v3.2.2), it adds an unnecessary right margin that renders the masonry unable to be centered on the page. It also does the same thing without a 'container-fluid' class, with just 'container'.

HTML: (I also am loading the most recent version of Masonry and ImagesLoaded

    <div class="container-fluid" id="content_container">
      <div class="row">
        <div class="col-sm-12">
            <div class="masonry js-masonry" data-masonry-options='{ "columnWidth": 350, "gutter": 0}'>
              <div class="item w2"><img src="http://placehold.it/350x350"></div>
              <div class="item w3"><img src="http://placehold.it/350x350"></div>
              <!-- etc...until 8 images are rendered -->
            </div>
        </div>
      </div>
    </div>

CSS:

.item {
 width: 350px;
 margin: 0px;
 float: left;}

 .item.w2 { width:  350px; }
 .item.w3 { width:  350px; }
 .item.w4 { width:  350px; }

In Firefox's inspect element, it clearly shows this extra margin being added. Inspecting the code, there is nothing generating any margin/padding. Note the lighter blue is the additional padding and the white area is the normal gutter from the bootstrap container. Ideally, the white area would be the same on each side, centering the masonry layout.

View image: https://i.sstatic.net/YNSKh.jpg

JSFiddle: http://jsfiddle.net/jco4xrvr/2/

Upvotes: 0

Views: 1774

Answers (1)

Macsupport
Macsupport

Reputation: 5444

Here is a fix jsfiddle.

Basically you need to use isFitWidth and set the css for your masonry container:

HTML:

 <div class="container-fluid" id="content_container">
  <div class="row">
    <div class="col-sm-12">
        <div class="masonry js-masonry" data-masonry-options='{ "columnWidth": 350, "gutter": 0,"isFitWidth": true}'>
            <div class="item w2">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="item w3">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="item w4">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="item w4">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="item w4">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="item w4">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="item w4">
                <img src="http://placehold.it/350x350">
            </div>
            <div class="item w4">
                <img src="http://placehold.it/350x350">
            </div>
        </div>
    </div>
</div>
</div>

add this CSS:

.masonry {
margin: 0 auto;
}

Upvotes: 1

Related Questions