Html 防止引导表比跨度更宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16752649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
prevent bootstrap table being wider than span
提问by ProfHase85
Below is a content which is usually generated dynamically. In the main part of the page there is a <div class="span6">. Sometimes the Table in this div becomes wider than the div itself (I ve checked the css, the width is set to 100%) . If I only put short text into the table, or if i make the div wider everything is fine.
The Questions are:
以下是通常动态生成的内容。在页面的主要部分有一个<div class="span6">. 有时这个 div 中的 Table 变得比 div 本身更宽（我检查了 css，宽度设置为 100%）。如果我只将短文本放入表格中，或者如果我使 div 更宽，一切都很好。问题是：
- Why can a table become wider than
div class=spanX? I always thought, a block element takes the width of its parent? - The number of characters/spaces in the respective
tdof the table can vary. How do I prevent the table from growing wider than the div? Of course I can dynamically check for the number of characters in atsbut what do i do with this information?
- 为什么一张桌子可以变得比 宽
div class=spanX？我一直在想，块元素会占用其父元素的宽度吗？ - 相应
td表格中的字符/空格数可能会有所不同。如何防止表格变得比 div 更宽？当然，我可以动态检查 a 中的字符数，ts但我如何处理这些信息？
The HTML:
HTML：
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>MySite</title>
<meta name="author" content="me"/>
<link href="static/css/bootstrap.css" rel="stylesheet">
<link href="static/css/bootstrap-responsive.css" rel="stylesheet">
<link href="static/profhase.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="static/bootstrap/js/bootstrap.js"></script>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<ul class="nav">
<li><a class="brand" href="profhase">MyBrand</a></li>
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Blog</a></li>
</ul>
<div class="nav pull-right collapse nav-collapse" style="hight: 0px">
<ul class="nav collapse nav-collapse">
<li><p class="navbar-text">Apps: </p></li>
<li><a href="firstapp/">AppOne <i class="icon-lock"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="span2">
<p>
My Wonderful sidebar
</p>
</div>
<div class="span6" style="background:red;">
<table class="table">
<tbody>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
<th>Header5</th>
<th>Header6</th>
</tr>
<tr>
<td>My first Test</td>
<td>My second Test</td>
<td>My third Test</td>
<td>My fifth Test</td>
<td>My lalalalalong long lelong long long Test</td>
<td>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown">
Dropdown Choices <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a id=1>First wonderful choice</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
回答by ProfHase85
Thanks to the answer by FelipeAls this code did it:
感谢 FelipeAls 的回答，这段代码做到了：
table {
table-layout: fixed;
word-wrap: break-word;
}
Another possibility is not to use word wrap but having something like ...
另一种可能性是不使用自动换行，而是使用类似...
回答by FelipeAls
I noticed the parent of
span6is displayed astablebutspan6is floating. Removing the float and setting thespan*todisplay: table-cellworks: fiddle
Note: there may have a more suitable class thanspan*in TB, a class which already hasdisplay: table-cell.Other solution, but probably not what you want to achieve: the technique of "an element with
overflow: hidden;alongside a floating element": Working fiddle
The explanation of this magic is named block formatting context (T. J. Koblentz' blog)- question on SO
我注意到的父级
span6显示为table但span6浮动。删除浮点数并将其设置span*为display: table-cell有效：fiddle
注意：可能有一个比span*TB更合适的类，一个已经有display: table-cell.其他解决方案，但可能不是您想要实现的：“带有
overflow: hidden;浮动元素的元素”的技术：工作小提琴
这种魔法的解释被称为块格式上下文（TJ Koblentz 的博客）-关于 SO 的问题
