I'm new to bootstrap, I use col-md-* grid system to make a list of items. Each item is something like the picture below
The source code in JSFiddle.
The problem is when I decrease the size of the browser windows, the red rectangle goes in the wrong place. How can I fix it?
If you want something to be the right but not all the way to the right you should use the bootstrap grid off-sets.
Second
Take a look at this grid example and see what resizes at smaller windows to full-width.
also the the responsiveness of bootstrap at certain widths makes col-md-6 100%
it seems like you will need to col-xs-6 instead.
I have updated the fiddle here
http://jsfiddle.net/ZTgGX/2/
Related
I've built a small layout using flex and chunks form Bootstrap as well as a mini grid system but I'm having issues with situations where the children of that flexbox are not tall enough to actually fill it. In my case, if you go ahead and inspect the .demo-install-components, you can see that it has a higher height than its children. Surprisingly, if I add just another item .install-component-individual to the mix, it's fixed or if I remove the check icon .installed-component-check. To me, this smells very, very bad. It looks like this:
Here's the code (sorry for it being so long and on jsfiddle, wanted to provide everything I have):
JSFiddle code.
What exactly am I missing here? I feel as if my knowledge of flexbox isn't complete.
Margin from #components-to-install-list ends up under your container.
By removing the width and margin from #components-to-install-list (line 986-987 from CSS), the space underneath will disappear:
Im using simple:
<div class="row">
<div class="col-11"></div>
<div class="col-1"></div>
</div>
within a .container-fluid div and I'm wondering why the grid adds a horizontal scrollbar when the window width is below 623px?
I'm trying to figure it out because I don't want this to happen in my project.
Someone knows anything about it?
Here is a codepen.io version to check it out.
On your codepen, it is because the "Right" word is to big for the col-1.
That is because the word "Right" doesn't fit into the col-1 column when the window gets to that size. So, it overflows and that's why the horizontal scrollbar appears.
To fix the issue, you could use col-auto instead of col-1.
col-auto would make the column as narrow as it has to be in order to fit the content inside the column. That also means, that in that particular case, the column would simply get pushed down (when it doesn't fit) and you wouldn't get any horizontal scrollbars.
I have a masonry grid to display products and in some cases the first item's border move to the next column. It doesn't happen always and I can't find the reason for this to happen.
Link to the page:
http://en.naaman.b24online.com/b2c-products/tsb-163746/
Thanks.
One solution would be to create a wrapper around each box, so the box with border is inside and cant be breaked
OK. I found that the height of row of the pins (defined as #columns) is too short. I added the height for the different screen sizes and it seem to work.
Not sure why the row is not taking it's full height.
Using Angularjs Material framework, I aligned the content (containing cards) to the center, the problem is when I increase the height of one card, the height of the adjacent card also increases. Example code http://embed.plnkr.co/eaLjJDbjL1KnOI4jLYyO/preview
The cards will have dynamic height, and should align one after another both horizontally as well as vertically.
I am trying to achieve some thing like this:
https://lh3.googleusercontent.com/-6ocJpsXmVLU/VTgSj9wd_CI/AAAAAAAAACs/PavEWs9wiGM/s1600/cardLayout.png
I don't think this has anything to do with Angular. It looks like your example is using flexbox CSS, which is the cause of your columns having equal height. Remove all the flex attributes and your cards will take take the height of the contained content. If you are looking for a masonry tile layout you'll likely need JavaScript to help with that since elements float left and clear one another. Take a look at this and see if this helps http://masonry.desandro.com/
With Bootstrap loaded, the div doesn't expand along with the contents inside. So if I insert an image or enlarge the text, it just kind of...gets squished in or squished out of the div.
http://jsfiddle.net/thomaswtsang/SSmJt/3/
What is it about Bootstrap that causes this to do this?
It looks like the bootsrap css used by you does not have the responsive features.
Please download the bootstrap library from the customize option.
You can have a look at this modified sample. You need to add some structural changes also as defined by bootstrap. You need to place the spanx definitions inside a row element to work correctly.