question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Non-floating columns in grid system

See original GitHub issue

Based on an official Bootstrap’s example (v3.3.7), there is a trouble:

If we are in a media query and it is not applying a proper class on a column, by default the full width is reached (like a virtual col-*-12 class). However, the problem is that it is not floating as it should be.

Considering a portion of the said particular example:

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>

On a extra small (phones) or small (tablets) devices, children divs have no float: left.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:1
  • Comments:15 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
ghostcommented, Sep 22, 2016

Take a simple example, @ralfting:

<div class="row">
  <div class="col-lg-8">
    <h2>Title 1</h2>
  </div>
  <div class="col-lg-5">
    <h2>Title 2</h2>
  </div>
</div>

You can appreciate the differences between large and medium device (aside from the smallest): without float styles, there is margin collapsing in headings (and other possible unexpected behaviors).

2reactions
ghostcommented, Sep 21, 2016

You (@heikojansen and @ralfting) did not understand my explanation.

I know perfectly well there are 1 column per line for the smallest devices. The only problem (as I wrote previuosly) is that divs have not any float style declaration as expected.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Divs will not float properly in Nested Grid system
I am using a 16 grid system. Two 8 columns divs (floating side by side). Within the 8 column div I want to...
Read more >
Grid system - Bootstrap
Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully...
Read more >
CSS Grid solution to the problems of float and flexbox
Now we will specify the form of our layout. Since we want 3 columns and a single row, we will use the properties...
Read more >
Basic concepts of grid layout - CSS: Cascading Style Sheets
The Grid Layout specification is flexible enough to add additional rows and columns when needed. Features such as adding "as many columns that ......
Read more >
dividing long division calculator
As a separator being used in grid-rows or grid-columns of As sass is advanced ... Also, all arithmetic done with non-floating point literals...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found