表内引导网格系统

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>