桌子内的引导网格系统

Question

<div class="table-responsive">
   <table class="table">
      <thead>
         Head
      </thead>
      <tbody>
         <tr>
            <td>
            <div class="row">
               <div class="col-lg-6">Item 1.0</div>
               <div class="col-lg-6">Item 1.1</div>
            </div>
            </td>
            <td>
            <div class="row">
               <div class="col-lg-6">Item 2.0</div>
               <div class="col-lg-6">Item 2.1</div>
            </div>   
         </td>
         </tr>
      </tbody>
   </table>
</div>

此代码创建一个表，其中所有项目都在同一行中。我已经搜索了css文件，但是没有在任何地方定义inline或inline-block，所以我猜这是正常的引导行为。我想要实现的是一个接一个显示前缀为1的项，而对于前缀为2的项是相同的，但是我希望它们都在同一行中。我尝试将<ul>与<li>元素一起使用，但是由于某些原因，它们也显示在同一行中。 我的表应该只包含两列和所有它们之上的一个标题。这就是我现在得到的：

Answer 1

问题归因于列类- col-lg-6 ，这使div使用相同宽度的父td，使用类 col-lg-12 使用完整的td宽度，请在下面检查这些类的CSS

.col-lg-12 {
    width: 100%;
}

.col-lg-12 {
    width: 50%;
}

运行以下代码

favorite
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="table-responsive">
   <table class="table">
      <thead>
         Head
      </thead>
      <tbody>
         <tr>
            <td>
            <div class="row">
               <div class="col-lg-12">Item 1.0</div>
               <div class="col-lg-12">Item 1.1</div>
            </div>
            </td>
            <td>
            <div class="row">
               <div class="col-lg-12">Item 2.0</div>
               <div class="col-lg-12">Item 2.1</div>
            </div>   
         </td>
         </tr>
      </tbody>
   </table>
</div>

codepen供参考-https://codepen.io/nagasai/pen/xybpMm

Answer 2

我还不明白为什么当td设计成这样工作时，为什么需要在表格内使用引导网格系统。您还使用了col-lg-6，它相当于1 tr内的2 td，因为没有塌陷（lg）。

如果使用此代码，您将获得类似的输出；

<h6>Default:</h6>
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th colspan='2'>
          Head
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          Item 1.0
        </td>
        <td>
          Item 1.1
        </td>
      </tr>
      <tr>
        <td>
          Item 2.0
        </td>
        <td>
          Item 2.1
        </td>
      </tr>
    </tbody>
  </table>
</div>

<br>
<h6>Two Columns Only:</h6>
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th colspan='4'>
          Head
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          Item 1.0
        </td>
        <td>
          Item 1.1
        </td>
        <td>
          Item 2.0
        </td>
        <td>
          Item 2.1
        </td>
      </tr>
    </tbody>
  </table>
</div>