Question

我对标题有疑问。

我已经查看了其他问题并尝试了他们的bootply以确保这些是可能的（使用列网格来设置列的大小）。但是，我的情况可能比这更复杂，这就是为什么网格系统不能像我认为的那样工作的原因。你能帮我告诉我应该做些什么吗？

代码：

<div class="container-fluid">
    <div id="wrapper">
                <table class="table table-striped" id="table">
                    <thead>
                        <th class="col-xs-1">ID</th>
                        <th class="col-xs-2">Name</th>
                        <th class="col-xs-2">Phone</th>
                        <th class="col-xs-2">Email</th>
                        <th class="col-xs-2">University</th>
                        <th class="col-xs-2">Course</th>
                        <th class="col-xs-1">Visa Catergory</th>
                        <th class="col-xs-10">Age</th>
                    </thead>
                    <tbody id="data">

                    </tbody>
                </table>
            </div>
        </div>

CSS for wrapper：

#wrapper {
    width: 600px;
    overflow-x: scroll;
}

问题很简单：

我在列Age中有col-xs-10，但它的大小并不关心我放在那里的数字和（我认为）只是试图结束内容
我有溢出-x
列总计加起来超过12

Answer 1

一个BS网格单元的宽度始终为父网格总宽度的8.33％。 22个细胞将占183％。默认情况下，100％父宽度后的所有单元格都会进入下一行。只要您使用表格，其中一行中的所有<td>都将水平对齐，尽管它们的宽度。因此浏览器尽可能地绘制这种冲突，因此最后一个表格单元将被缩小。我认为bootstrap不是表格格式工具。它更像桌子的美观。所以（我认为）最好使用<div> - s集合进行表格结构渲染。

似乎BS没有按照您的意愿格式化表的类。无论如何，为了定义表格单元格尺寸，您可以使用colspan。如果您的代码块中的网格单元总数为22，那么您需要将包含22个单元格的行定义为结构基础。查看片段（添加边框以获得更好的可视化）

#wrapper {
    width: 600px;
    overflow-x: scroll;
    margin: 0 auto;
}

table td, th, thead {
   border: 1px solid orange;
}
.formatter > td {
    width: 4.5%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div id="wrapper">
        <div style="width: 183%;">
                <table class="table table-striped" id="table">
                    

                    <thead>
                        <tr>
                        <th>ID</th>
                        <th colspan='2'>Name</th>
                        <th colspan='2'>Phone</th>
                        <th colspan='2'>Email</th>
                        <th colspan='2'>University</th>
                        <th colspan='2'>Course</th>
                        <th>Visa Catergory</th>
                        <th colspan='10'>Age</th>
                        </tr>
                    </thead>
 <tr class="formatter">
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 <tbody id="data">
 </tbody>
                </table>
            </div>
        </div>

这里是使用div的解决方案 - 用bootstrap类设置样式：

#wrapper {
    width: 600px;
    overflow-x: scroll;
    margin: 0 auto;
}
div[class^="col-xs-"] {
    border: 1px solid orange;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="wrapper">
    <div style="width: 171%;">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-7">
                    <div class="row">
                        <div class="col-xs-1">ID</div>
                        <div class="col-xs-2">Name</div>
                        <div class="col-xs-2">Phone</div>
                        <div class="col-xs-2">Email</div>
                        <div class="col-xs-2">University</div>
                        <div class="col-xs-2">Course</div>
                        <div class="col-xs-1">Visa Catergory</div>
                    </div>
                </div>
                <div class="col-xs-5">
                    <div class="row">
                        <div class="col-xs-12">Age</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是基于颜色差异的紧凑渲染的另一种变体：

#wrapper {
    width: 600px;
    margin: 0 auto;
}
div[class^="col-xs-"] {
    border: 1px solid orange;
    box-sizing: border-box;
    background: #99b;
}
div.subrow {
    background: #cce;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div id="wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-1">ID</div>
            <div class="col-xs-2">Name</div>
            <div class="col-xs-2">Phone</div>
            <div class="col-xs-2">Email</div>
            <div class="col-xs-2">University</div>
            <div class="col-xs-2">Course</div>
            <div class="col-xs-1">Visa</div>
            <div class="col-xs-12 subrow">Age</div>
        </div>
    </div>
</div>

在表中使用Bootstrap网格系统

1 个答案: