http://www.bootply.com/ySKc5Jc7B4
The initial arrangement is:
1 2 3
4 5 6
If I now gradually decrease the window's size then the grid suddenly jumps to:
1
2
...
6
I would like to have an intermediate step with two columns:
1 2
3 4
5 6
I assume this behaviour is called fluid(ity) - hence I tried the container-fluid class for the container div. But that didn't do it and furthermore messed with the initial grid sizing.
Is it possible to make a grid behave in such a sensible way?
(I'm pretty new to Twitter Bootstrap (3))
Sure. You just need to change the class names on your tiles.
Go from col-md-4 to a combination like col-lg-4 col-md-6 col-xs-12. What that's telling it to do is:
For large screens, take up 4 of 12 columns.
For medium screens, take up 6 of 12 columns.
For very small screens, take up 12 of 12 columns.
Hope that helps.
Example here
Related
I am creating a simple Resume website but one thing is bugging me:
I created two columns of 8 and 4
next row same columns of 8 and 4
another row and same columns of 8 and 4
but due to my content the rows height is not same what i want is to make the row below cover the gap above it without adding so much white space. I dont want to add white space i want to remove white space (blank area between rows). I have also attached the image.
Bootstrap v5
I will be thankful.
I am trying to use nth-child to target 1,6, 7,10, 13 ect. and some style. I was targeting them individually but this wont work as the content will be automatically generated.
I have 1 large div followed by 2 small divs one above the other then the next row is the opposite 2 small and one large and this is to continue as content is added.
What would be my best option for achieving this ?
Below is the css i am using at the min:
div:nth-child(1),div:nth-child(6),div:nth-child(7),
div:nth-child(10),div:nth-child(13){
background:#000;
}
I have 1 large div followed by 2 small divs one above the other then the next row is the opposite 2 small and one large and this is to continue as content is added.
So the same situation repeats every 6 items. Using :nth-child(an+b), you now know that a=6.
2 elements are selected for each group of 6: 1 and 6 (and then 7 and 12 (not 10), 13 and 18, etc). To select the first one, b=1 is OK. To select the 6th one, b=0 or b=6 are OK
That leads to:
li:nth-child(6n+1),
li:nth-child(6n) {
/* sth different */
}
Codepen: http://codepen.io/anon/pen/cypAn
You should use nth-child if you just want to use CSS. See this article here. There is a nice table at the bottom that can help if you are a visual learner.
Let's say that I want a Drupal View to display un unknown amount of "items". I would like to display 4 items per row (in the width of the page).
I would normally use a row-fluid container and have 4 span3 items in it.
Now how would I achieve that using Drupal Views module so that this would get repeated if I have 8 elements (2 rows of 4) or 9 elements (2 rows of 4 + 1 row with only 1 element), etc.
If this is not feasible with the Views module, what approach would you suggest?
Thank you.
Use the http://drupal.org/project/semanticviews module! You'll see it is quite easy.
Inspired by this tutorial, I've set up a Fiddle that has 5 columns. That works fine with 5 images. With 6, however, it sorts it into 2 rows of 3 instead of one row of 5 and a row of 1. Other configurations have a similar effect.
Is there a reason for this and a way to prevent that from happening?
You should use as an additional style, like this:
float:left;
No JS, please, just pure CSS. Horizontal, drop down, with sub-menus beyond that
item 1 item 2 item 3 item 4
hover item 2
item 1 item 2 item 3 item 4
option 1
option 2
option 3
I want to hover over option 2 and get
item 1 item 2 item 3 item 4
option 1
option 2 choice 1
option 3 choice 2
choice 3
Must work in MS IE 7+ (other browser a bonus, probably a given). Thanks
Check out http://www.cssplay.co.uk/menus/final_drop.html
Ive used Project7.coms css library/technique fairly successfully. An example of its application can be found on my small company's website (I apologize for using/ plugging my own site) but it is the only time I've used this library.