CODEWITHSUNDEEP
htmltwitter-bootstrap-3
Noripsni
Noripsni

Reputation: 425

Trouble with bootstrap columns

I'm having trouble with bootstrap's columns.

The problem is that col-xs-8 padding exceeds the parent row width and creates a horizontal scroll bar. But if I remove the padding then col-xs-8 is pulled right by the amount of padding removed. For example when padding is 15px and I remove it the col-xs-8 is moved right by the same amount.

My HTML

<div ng-cloak>
    <div class="row">
        <div ng-style="{'margin-left':marginLeft}" class="col-xs-4">
            <div class="row">
                <div class="col-xs-4">
                    <ul class="nav nav-tabs">
                        <!--tabs-->
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-xs-8">
            <div id="canvasContainer">
                <canvas></canvas>
            </div>
        </div>
    </div>
</div>

I don't want to use overflow-x:hidden.

Upvotes: 3

Views: 74

Answers (1)

Kuldeep Choudhary
Kuldeep Choudhary

Reputation: 775

There is problem with 

 <div ng-style="{'margin-left':marginLeft}" class="col-xs-4">

As much you will give margin-left it will go right..You need to give padding-left in left div to control this structure.

Upvotes: 1

Related Questions