Container not working inside contatiner-fluid for larger screens

0
votes

I have a container-fluid with col-lg-2 for left menu options and col-lg-10 for content sections. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container-fluid>
    <div class="row">
        <div class="col-lg-2">
            <ul>
                <li>one</li>
                <li>two</li>
            </ul>
        </div>
        <div class="col-lg-10>
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

This works perfect for small and medium screen but doesn't work for large screen i.e. min-width: 1200px. In small and medium screen the col-lg-2 and col-lg-10 are two rows up and down. But for bigger screens, these are two columns and the width goes beyond the screen.

Any help is appreciated. Thanks

2
htmlcsstwitter-bootstrap
Can you add the CSS for those elements possibly? Sounds like they possibly have a max-width with a float:left. – Gezzasa
its all manipulated by bootstrap's css @Gezzasa – Ron.Basco
You should be able to edit the CSS. The information you've given (unless I'm not completely understanding what you're asking) is too little to help. – Gezzasa
why complicate things and use grid system for what you already have container? – mzrnsh
Looked inside the bootstrap CSS. When your screen goes over 1199px it implements this @media (min-width:1200px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}. This with another style somewhere decreasing the width of the columns is causing your issue. – Gezzasa

2 Answers

1
votes

close your classes. container-fluid and 'col-lg-10' are not closed.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2">

    </div>
    <div class="col-lg-10">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleInputEmail1 ">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                        </div>
                    </div>
                    <div class="col-sm-6 ">
                        <div class="form-group ">
                            <label for="exampleInputPassword1 ">Password</label>
                            <input type="password " class="form-control " id="exampleInputPassword1 " placeholder="Password ">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
0
votes

Its the way you are nesting row withing row. on a device greater than lg, both columns col-lg-2 & col-lg-10 will be on the same row enough width is available for both cols to occupy. but for less size one row will be for col-lg-2 and next for row for col-lg-10. so better close first row for col-lg-2 and use another row for next col-lg-10 to preserve the consistency on every devices.

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-2">
            <ul>
                <li>one</li>
                <li>two</li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-10">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                        </div>
                    </div>
        </div>
    </div>
    </div>