发表新帖
发表新帖

Why is content extending beyond containing BootStrap “span” and overlapping, at some resolutions?
后端 未结
关注
4 1184
北荒
北荒 2020-12-31 05:07

JSFiddle: http://jsfiddle.net/ardave/8DR6n/3/ Full Screen JSFiddle: http://jsfiddle.net/ardave/8DR6n/3/embedded/result/

I\'ve got these three divs at the bottom rig

相关标签:
4条回答
  • 佛祖请我去吃肉
    2020-12-31 05:30

    I can't tell you the "Bootstrap way" to fix this, since I don't use it. I can tell you the why: Your content doesn't allow it at that breakpoint.

    Because rows of tables don't wrap around (ie. all of the cells for each row must appear on the same line), there is an absolute minimum width that every given table can resize down to, which depends on things like paddings and the widest non-wrapping content for each cell. For your tables, the smallest they can go is whatever the width of "Column", "Column", and "10/11/2012" equal out to plus 48px (8px padding on each side times 3).

    The span4s are only allowed to be 31.49% of 724px (definition on .container ancestor element), which isn't wide enough to contain the tables at their smallest possible width.

    My recommendation would be to not try and place all 3 tables side by side. Your display would have to be exceptionally wide in order for it to not look cramped and not have horizontal scrolling.

    0 讨论(0)
  • 太阳男子
    2020-12-31 05:32

    I know this thread is several months old, but I also know that I really appreciate when someone posts an answer that worked for their similar situation. Here's the way I did it in bootstrap 2 and 3.

    .cw-table-list{
    margin:0px !important;
    table-layout:fixed;  
  }
  .cw-table-list td{
    padding-bottom: 0px !important;  
    overflow:hidden;
  }

    Hope this helps. Twitch

    0 讨论(0)
  • 温柔的废话
    2020-12-31 05:41

    You can apply the style = "overflow: auto;" to put a horizontal scroll bar at your table. Thus the design will still remain responsive. Follow the code:

    .table-scrollable{
    overflow: auto;
}

    And use it on your parent div:

    <div class='table-scrollable'>
    0 讨论(0)
  • 忘了有多久
    2020-12-31 05:55

    Assign the table's container element with overflow: auto; and the table itself with table-layout: fixed; 

    .ie-table-fix {
    overflow: auto;
}
.ie-table-fix > table {
    table-layout: fixed;
}
    0 讨论(0)
 看不清?
提交回复
热议问题