Using Foundation, I sometimes have an empty column in a row, and that column gets collapsed entirely, engendering a mismatch between column data and column headers. Is there a way that I can prevent this collapse, making even empty columns get full width? (Is there a way besides inserting non-breaking spaces or other text into the otherwise empty columns?)
<div class="row">
<div class="small-1 columns">Bruce</div>
<div class="small-1 columns"></div> <!-- this gets collapsed to 0 width! -->
<div class="small-1 columns">Dickinson</div>
</div>
Apply the following css:
.column, .columns{
min-height: 1px;
}
You could add some pseudo content to the containing element to trigger rendering.
Markup:
<div class="row">
<div class="column">
<p class="middlename"></p>
</div>
</div>
CSS:
.middlename:before {
content: "\00a0";
font-size: 0;
}
You can tag the last column (you are using) with "end".
<div class="row">
<div class="medium-3 columns">3</div>
<div class="medium-3 columns">3</div>
<div class="medium-3 columns end">3 end</div>
</div>
Related
In the Flexboxgrid framework I see a margin of -1rem on the .row class. In small viewports this creates a small horizontal scroll of the container.
Since I've seen this negative margin on other frameworks, what is its purpose? Inner columns have a padding of the same qty, reversed.
In the picture, red line is .container, dashed line is .row. Btw the margin is visible only on the right.
Because you're supposed to use them in combination with columns.
Columns generally have a padding to push the contents of them away from the border, in order to make it look nicer. However, when you are nesting columns within columns, the content keeps getting pushed inwards, which is mostly not a desired effect. To keep this from happening the rows have a negative margin, which pulls the columns back. In your case, it looks like you need to add a col-xs-12 around the column groups within the rows . This will prevent the content from being pulled too far.
Take a look here for a nicely explained introduction.
Here's a demonstration of how the .row class works:
.col1 {
background: red;
}
.col2 {
background: green;
}
body {
font-family: sans-serif;
}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css">
<div class="row">
<div class="col-xs-12
col1">
<div class="col-xs-12
col2">
<div class="box">Without a row</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12
col1">
<div class="row">
<div class="col-xs-12
col2">
<div class="box">With a row</div>
</div>
</div>
</div>
</div>
In general row is placed in container. container has padding of 15 and row has margin of -15
I want the background of a row full width and the content within it a standard width row.
I'm attempting to do this by created a expanded width row, applying a background to it and nesting a standard row inside it. However the nested row is full expanded width despite not having the expanded class.
Here is my attempt
<div class="row">
<div class="small-2 large-4 columns"><!-- ... --></div>
<div class="small-4 large-4 columns"><!-- ... --></div>
<div class="small-6 large-4 columns"><!-- ... --></div>
</div>
<div class="row expanded">
Expanded row
<div class="row">
<div class="large-12">Nested Row</div>
</div>
</div>
http://codepen.io/onlyslightly/pen/beqZwo
Is there a way to nest standard width rows inside expanded width rows? Or is there a more appropriate way to perform this action?
This is a known issue that was introduced in Foundation 6.2.1:
https://github.com/zurb/foundation-sites/issues/8886
As you can see in 6.2.0 the inner row works fine:
http://codeply.com/go/UfbFrTyThU
The issue is still open, but you can workaround it using some extra CSS...
.row .row {
max-width: 75em;
}
http://codeply.com/go/vyjVAwXkn4
I have a weird problem with bootstrap columns.
I am using grid as below:
<div class="row">
<div class="col-sm-3">Content1</div>
<div class="col-sm-3">Content2</div>
<div class="col-sm-3">Content3</div>
<div class="col-sm-3">Content4</div>
</div>
And these columns are randomly generated and sometimes there can be no content in any of the columns like as below
<div class="row">
<div class="col-sm-3">Content1</div>
<div class="col-sm-3"></div>
<div class="col-sm-3">Content3</div>
<div class="col-sm-3">Content4</div>
</div>
Now the problem is that when there is no content in column2 then column3 content shifts left. I want to avoid that.
Below is the presentation that i am getting
When all blocks have content
Content1 Content2 Content3 Content4
When second block do not have content
Content1 Content3 Content4
Representation that want is that:
Content1 Content3 Content4
You should add an inner Div inside your columns and set min-height property for better solution:
New HTML
<div class="row">
<div class="col-sm-3"><div class="column-content">Content1</div></div>
<div class="col-sm-3"><div class="column-content"></div></div>
<div class="col-sm-3"><div class="column-content">Content3</div></div>
<div class="col-sm-3"><div class="column-content">Content4</div></div>
</div>
CSS
.column-content {
min-height: 100px;
}
Taken help form this page: http://www.tutorialrepublic.com/css-reference/css-min-height-property.php
The easiest solution will be to add “ ” to the end of a column.
It will not change much your lay out but will help with “empty” columns
I think there is no such a solution in bootstrap for your problem.
But You can use an jquery script for checking the div is null or not, if null assign an css property display:none; to that div( using script)
I may sound stupid, but this is all new to me.
I'm guessing I have overlooked something.I have no ideea how to fill the white spaces between my columns(end-to-end)
This is my code:
<div class="container" id="cfoot">
<div class="col-lg-3">
<h3>despre noi</h3>
<p>Pensiunea Delia</p>
<p>Echipa Noastra</p>
</div>
<div class="col-lg-3">
<h3>link-uri utile</h3>
<p>Intrebari frecvente</p>
<p>Serviciile noastre</p>
<p>Contact</p>
</div>
<div class="col-lg-3">
<h3>ultimele postari</h3>
<p>Titlul postare blog vine aici</p>
<p>Titlul postare blog vine aici</p>
<p>Titlul postare blog vine aici</p>
</div>
<div class="col-lg-3">
<img src="imgs/logodelia.png" alt="logobottom">
<p># 2014 Pensiunea Delia. Designed by Kinkara Web</p>
</div>
CSS:
#cfoot.container{
background-color:#f4f4f4;
color:#6c6c6c;
background-image:none;
}
Can anyone help please?
When I use developer tools to look at the markup, I'm seeing this applied by the browser:
body {
display: block;
margin: 8px;
}
If you simply add
body {
margin: 0;
}
.container {
margin: 10px; // adjust as needed
}
I think you'll be on your way.
note: you're also missing the Bootstrap row
<div class="row">
fiddle: http://jsfiddle.net/XEF8v/1/
I'm not quite clear on your question. I think you are asking us how you can use bootstrap to achieve the layout of four columns, like in the second image that you have posted.
You can get most of the way there by using Bootstraps built-in grid system.
Overview of Bootstrap's grid system: http://getbootstrap.com/css/#grid
<div class="container-fluid">
<div class="row">
<div class="col-md-1" id="col-1"><!-- empty space on left --></div>
<div class="col-md-2" id="col-2"><!-- despre noi column --></div>
<div class="col-md-2" id="col-3"><!-- link-uri-title column --></div>
<div class="col-md-2" id="col-4"><!-- ultimele column --></div>
<div class="col-md-4" id="col-5"><!-- delea logo column --></div>
<div class="col-md-1" id="col-6"><!-- empty space on right --></div>
</div>
</div>
The col-md-<#> class determines the horizontal width of a column. Per Bootstrap's documentation, these numbers should add up to 12.
I need to add space between grids, without changing .col-md-4 and .col-md-8 style
<div class="row" >
<div class="col-md-4" style="height:250px;">grid1</div>
<div class="col-md-8" style="height:250px;">grid2</div>
</div>
I'd suggest you add a new div element inside any of the .col-md-* and give it a padding (or a margin) (Because you can't edit the default Bootstrap files).
<div class="row" >
<div class="col-md-4" style="height:250px;">grid1</div>
<div class="col-md-8" style="height:250px;">
<div style="padding-left: 20px;">grid2</div> <!-- The added div -->
</div>
</div>
Another option is to create a special CSS class and apply it to the rows where you want the wider spacing..
.row.wide-gutter [class*='col-']:not(:first-child):not(:last-child) {
padding-right:20px;
padding-left:20px;
}
Demo: http://bootply.com/110509