'Why does the bootstrap grid column wrap [duplicate]

When the below HTML snippet is viewed in the browser, the last column of the first row gets wrapped, however none of the columns in the second row get wrapped when the browser width is reduced. I was under the impression that if col-xs-* class is used the columns wont stack up. What do i need to do the ensure that the last column of the first row does not wrap ?

<!DOCTYPE html>
<html>
<head>
<link data-require="[email protected]" data-semver="3.3.6" 
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />   
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-1">
                a
            </div>
            <div class="col-xs-10">
                bbb
            </div>
            <div class="col-xs-1">
                c
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2">
                a
            </div>
            <div class="col-xs-8">
                bbb
            </div>
            <div class="col-xs-2">
                c
            </div>
        </div>
    </div>
  </body>
</html>
htmlcsstwitter-bootstrap


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions