Non-floating columns in grid system
See original GitHub issueBased 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 div
s have no float: left
.
Issue Analytics
- State:
- Created 7 years ago
- Reactions:1
- Comments:15 (1 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Take a simple example, @ralfting:
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).
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
div
s have not any float style declaration as expected.