在表中使用引导网格系统

Question

我有一个关于题目的问题。

我已经研究了其他问题，并尝试了他们的引导，以确保这些是可能的(使用列网格来设置列的大小)。然而，我的情况可能比这更复杂，这就是为什么网格系统不能像我认为的那样工作。你能帮我告诉我该怎么做吗？

代码：

<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：

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

问题很简单：

• 我在专栏时代有-xs-10，但是它的大小并不在乎我在里面放了多少，(我想)只是试图把内容包装起来。
• 我有溢出-x
• 该列加起来超过12。

Answer 1

一个BS网格单元格的宽度总是占父单元宽度的8.33% .22个细胞占183%。默认情况下，在父宽度100%之后的所有单元格都会换到下一行。一旦使用表，其一行中的所有<td>都将水平对齐，尽管它们的宽度不同。因此，浏览器尽可能地绘制这种冲突，从而缩小最后的表单元格。我认为引导不是一个表格格式的工具。这是一张桌子的美容师。因此(我认为)最好使用<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-s的解决方案：

​

#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>

​