简体   繁体   中英

Grid System Not Working Properly

For some reason, bootstrap is only allowing me to use the "col-sm" class. If I enter anything else into my code, including the "xs" class, the columns are stacked on top of one another. This is my code:

    <div class="container-fluid">
            <div class="row">
                <div class="col-xs-9">
                    <div class="well">something here</div>
                </div>
                <div class="col-xs-3">
                    <div class="well">something here</div>
                </div>
            </div>
        </div>

I have ensured that the appropriate CSS, JS, and jQuery files are linked (hence why the "col-sm" class works), and only have my own personal CSS style-sheet linked in addition to them (which does not predefine any width or height for any element). Furthermore, I am viewing my work on the latest version of Mozilla Firefox.

Edit: I have closed the div with the class "fluid-container", it still produces the same problem. That is, instead of the two columns appearing on the same row, the two columns are stacked on top of one another. For some reason, the only class that works is "col-sm"--any other class, including the "xs", just lines the columns atop of one another.

Your code is correct only the thing u missed out is the last '>' closing of div tag. replace:

<div class="container-fluid"

with:

<div class="container-fluid">

Please fix your div first <div class="container-fluid" missing > See below corrected format

<div class="container-fluid">
        <div class="row">
            <div class="col-xs-9">
                <div class="well">something here</div>
            </div>
            <div class="col-xs-3">
                <div class="well">something here</div>
            </div>
        </div>
    </div>

Use the latest stable version 3.7.7 of bootstrap and this problem will be solved. You can download it from here . If you don't want to use the newest version, you can try to use col-sm-9 instead of col-xs-9 and col-sm-3 instead of col-xs-3 , it will also solve the problem.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM