CODEWITHSUNDEEP
htmlcsstwitter-bootstrapuser-interfacetwitter-bootstrap-3
user6758349
user6758349

Reputation:

How to not wrap row on browser resize

I am using Bootstrap to structure the page like this. Each row has the same structure. 

<div class="outerDiv">
    <div class="row">
        <div class="col-md-6">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
        <div class="col-md-1">
            ...
        </div>
    </div>
</div>

This is working fine and looks like this. 

<------col-md-6------><-col-md-1-><-col-md-1-><-col-md-1-><-col-md-1-><-col-md-1->
<------col-md-6------><-col-md-1-><-col-md-1-><-col-md-1-><-col-md-1-><-col-md-1->

But when the browser resizes horitontally (gets narrower). The pages becomes the following: 

<------col-md-6------>
<-col-md-1->
<-col-md-1->
<-col-md-1->
<-col-md-1->
<-col-md-1->
<------col-md-6------>
<-col-md-1->
<-col-md-1->
<-col-md-1->
<-col-md-1->
<-col-md-1->

So how do I make it so that it does not stack? And have to be scrolled?

I have tried applying the following css but does not work. 

.row {
    white-space: nowrap;
    min-width: 1250px;
    overflow: auto;
}

Upvotes: 0

Views: 583

Answers (2)

hungerstar
hungerstar

Reputation: 21685

You will need to use col-xs- instead of col-md-. Your columns will get super skinny as a single column (width 12.5%) of a 300px viewport/parent element width is 37.5px (not a lot of room for content). Adding a minimum width for .row might be required depending on your needs.

When using the medium grid classes a class like .col-md-6 is set to width: 50%; for viewport sizes 992px and up. Below that the element (normally a DIV) no longer has a width applied to it and reverts to being a block level element that takes up the full width of the parent element. Hence the wrapping of your elements.

Using a smaller grid class like -xs- lowers the threshold for how small of a screen that an element will have a width set on it.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<div class="row">
  <div class="col-xs-6">col-xs-6</div>
  <div class="col-xs-1">col-xs-1</div>
  <div class="col-xs-1">col-xs-1</div>
  <div class="col-xs-1">col-xs-1</div>
  <div class="col-xs-1">col-xs-1</div>
  <div class="col-xs-1">col-xs-1</div>
</div>

<div class="row">
  <div class="col-xs-6">col-xs-6</div>
  <div class="col-xs-1">col-xs-1</div>
  <div class="col-xs-1">col-xs-1</div>
  <div class="col-xs-1">col-xs-1</div>
  <div class="col-xs-1">col-xs-1</div>
  <div class="col-xs-1">col-xs-1</div>
</div>

Example using a horizontal scrollbar if not enough space is available for content in the columns.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.fixed-container {
  overflow-x: scroll;
}

.fixed-container .row {
  min-width: 1250px;
}
<div class="container">
  <div class="fixed-container">

    <div class="row">
      <div class="col-xs-6">col-xs-6</div>
      <div class="col-xs-1">col-xs-1</div>
      <div class="col-xs-1">col-xs-1</div>
      <div class="col-xs-1">col-xs-1</div>
      <div class="col-xs-1">col-xs-1</div>
      <div class="col-xs-1">col-xs-1</div>
    </div>

    <div class="row">
      <div class="col-xs-6">col-xs-6</div>
      <div class="col-xs-1">col-xs-1</div>
      <div class="col-xs-1">col-xs-1</div>
      <div class="col-xs-1">col-xs-1</div>
      <div class="col-xs-1">col-xs-1</div>
      <div class="col-xs-1">col-xs-1</div>
    </div>

  </div>
</div>

Upvotes: 0

Canica
Canica

Reputation: 2738

You would have to use the corresponding grid column classes for each screen size. For example, using .col-xs-* and .col-sm-* for extra small and small screens as described in the Boostrap documentation: http://getbootstrap.com/css/#grid-options

<div class="row">
    <div class="col-md-6 col-sm-6 col-xs-6">
        ...
    </div>
    <div class="col-md-1 col-sm-1 col-xs-1">
        ...
    </div>
    <div class="col-md-1 col-sm-1 col-xs-1">
        ...
    </div>
    <div class="col-md-1 col-sm-1 col-xs-1">
        ...
    </div>
    <div class="col-md-1 col-sm-1 col-xs-1">
        ...
    </div>
    <div class="col-md-1 col-sm-1 col-xs-1">
        ...
    </div>
</div>

Upvotes: 2

Related Questions