All geek questions in one place

Twitter bootstrap alignment

I am using twitter bootstrap and trying to align two tables. I'm starting to think I'm wrong. I have two tables with three columns and one with two columns. I set the table of 3 columns to span6, span2, span4. I set up a table with two columns in span6 and span6. It seems that they are not always aligned in the middle depending on the page width. Is there any way to do this?

Example: http://jsfiddle.net/PSBtr/

<html> <head><link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"></head> <body> <table class="table table-bordered table-condensed"> <thead> <tr> <th class="span6">fdsafdfdf f dfdafs sd</th> <th class="span2">tesaaat</th> <th class="span4">ffdsfsd d</th> </tr> </thead> </table> <table class="table table-bordered table-condensed"> <thead> <tr> <th class="span6" >fdfdf fds f </th> <th class="span6">test</th> </tr> </thead> </table> </body> </html>​​​​​​​​​​​

In the end, I try to create a somewhat fluid layout that also has tables that will expand, but have a minimum size. Any additional suggestions for which the layout (from bootstrap) can accomplish this will also be helpful.

Thanks!

+4
source share
1 answer

Below code will do what you are trying to achieve:

  <table class="table table-bordered table-condensed"> <thead> <tr class="span12"> <th class="span6">fdsafdfdf f dfdafs sd</th> <th class="span2">tesaaat</th> <th class="span4">ffdsfsd d</th> </tr> </thead> </table> <table class="table table-bordered table-condensed"> <thead> <tr class="span12"> <th class="span6">fdfdf fds f </th> <th class="span6">test</th> </tr> </thead> </table>

For a later part of your question, it would be hard to say, since it will depend on the exact requirements, but yes, you can try a single column Layout of the fluid . In case users will be looking at compact screen sizes, you should consider responsive design .

+1
source

Source: https://habr.com/ru/post/1447088/

More articles:


All Articles