Twitter Bootstrap - Position Issue with Row-Fluid

Twitter Bootstrap - Position issue with row-fluid

If you know the number of span for each row, you can use an expression like this:

.row-fluid [class*="span"]:nth-child(3n+1) {
   margin-left: 0;
}

for example: if you have 3 spans for each row, the above expression will removes margin from the first span of each row. And the below one removes the margin-right for the last element on each row:

.row-fluid [class*="span"]:nth-child(3n+3) {
    margin-right: 0;
}

Twitter bootstrap row horizontal scroll issue in container fluid

After checking your code, it seems that you are missing a container-fluid for a row in the code. When I wrapped the code, I could get rid of the negative margin which is generating the scroll bar.

Before wrapping:

Horizontal Scroll bar due to negative margin. Check the selected element in Firebug.

After wrapping:

Horizontal Scroll bar removed.

Twitter Bootstrap 2 - Full width row

Solved! Sadly, I had to edit the bootstrap.css as it was always setting the margin-left regardless of what I did. I'm sure there is a way round this.

The solution below allows for a fixed - fluid - fixed 3 column layout

HTML:

   <div class="container-full"> 
     <div class="row">          
        <div class="span1" style="width: 150px;">
            <h4>Left</h4>
        </div>

        <div class="span10 filler">
            <h4>Center Content</h4>
        </div>

        <div class="span1" style="width: 150px;">
            <h4>Right</h4>
        </div>
     </div>     
   </div>

CSS:

    .filler {
        width: -moz-calc(100% - 300px); /* Firefox */
        width: -webkit-calc(100% - 300px); /* WebKit */
        width: -o-calc(100% - 300px); /* Opera */
        width: calc(100% - 300px); /* Standard */
    }

The -300px value is equal to the sum of the fixed column widths, in this case 150px each.

Now, on bootstrap.css goto line 282 ([class*="span"]) and change the margin-left from 20px to 0px.

Thats it! Worked for me. I must note that this only works with CSS3 due to the calc used in the CSS.

Why does row have a negative gutter but row-fluid does not?

row-fluid is a Bootstrap 2 class. In Bootstrap 3 row-fluid was replaced by row. If you use row-fluid in Bootstrap 3 as I did then no bootstrap style will be applied to the element. That's why there is no negative margin.

Why do my Twitter Bootstrap form fields overflow their well using fluid container?

The input html tags and their corresponding .input-* styles only set the css width. This is by design.

But adding a css max-width:100% will ensure that too large inputs are kept under control.

e.g. add this to your Head:

<style>
    input {
        max-width: 100%;
    } 
</style>

---

Related Topics