Question

我试图实现这种布局：

picture of desired output

左边的类型列占据的宽度比右边的其他两个项目宽得多，这是因为类型和描述可能很大。
此外，每个项目的类型和描述应与数量选择菜单和小计内容垂直对齐。

我使用bootstrap，但我是初学者，我正在尝试使用表格组件来实现此布局。我不知道在这种布局中使用表组件是更正确的方法或面板还是其他一些东西。

我得到的布局是：https://jsfiddle.net/bcvm3ap2/，但表标题与内容不对齐，每行的内容也没有垂直对齐。

你知道如何修复吗？如果表格是这种布局的正确方法吗？

HTML：

<div class="row no-gutters bg-white">
  <div class="col-12 col-md-8 px-4 pb-4">
    <table class="table table-responsive-sm border">
      <thead>
        <tr class="d-flex justify-content-between">
          <th scope="col" class="mr-auto">Type</th>
          <th scope="col">Quantity</th>
          <th scope="col">Subtotal</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="">
            <span class="text-heading-blue font-weight-semi-bold">Type1</span>
            <small class="font-weight-light d-block">Description</small>
          </td>
          <td><select class="form-control font-weight-normal text-gray" id="exampleFormControlSelect1">
            <option selected class="selected">0</option>
            <option>1</option>
            <option>2</option>
            </select>
          </td>
          <td>0</td>
        </tr>
        <tr>
          <td class="">
            <span class="text-heading-blue font-weight-semi-bold">Type2</span>
            <small class="font-weight-light d-block">Description</small>
          </td>
          <td><select class="form-control font-weight-normal text-gray" id="exampleFormControlSelect1">
            <option selected class="selected">2</option>
            <option>1</option>
            <option>2</option>
            </select>
          </td>
          <td>2</td>
        </tr>

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

对于面板也不起作用：https://jsfiddle.net/jdpr21qw/1/标题与内容不对齐。

Answer 1

我强烈反对Darren Sweeney。 Bootstrap 3并不简单。 Bootstrap 4是。

问题是：是的，该表不是这种布局的正确方法，因为Bootstrap中的HTML表没有给你很多控制。表实际上仅用于显示表格数据。如果希望列成为特定宽度，则使用表将成为错误的方法。

Bootstrap根本不是为了创建HTML表而设计的，您可以在其中指定特定列的宽度。 Bootstrap可以帮助您设置HTML表格的整体外观，但是只要您想指定特定列的宽度......那么，您可以在HTML中指定宽度，但这将是纯HTML和无响应即与Bootstrap无关。

顺便说一句，如果你更换 <tr class="d-flex justify-content-between"> 同 <tr> 你的桌子看起来很好。除此之外，第一栏不会比其他栏更宽。当然，除非您在第一列中添加更多内容：

Answer 2

尝试使用此代码，它将为您提供所需的布局。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <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.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row no-gutters bg-white">
  <div class="col-12 col-md-8 px-4 pb-4">
    <table class="table table-responsive-sm table-bordered">
      <thead class='text-center'>
        <tr class="text-center ">
          <th scope="col" class="mr-auto">Type</th>
          <th scope="col">Quantity</th>
          <th scope="col">Subtotal</th>
        </tr>
      </thead>
      <tbody >
        <tr >
          <td class="">
            <span class="text-heading-blue font-weight-semi-bold">Type1</span>
            <br/><small class="font-weight-light d-block">Description</small>
          </td>
          <td><select class="form-control font-weight-normal text-gray" id="exampleFormControlSelect1">
            <option selected class="selected">0</option>
            <option>1</option>
            <option>2</option>
            </select>
          </td>
          <td>0</td>
        </tr>
        <tr>
          <td class="">
            <span class="text-heading-blue font-weight-semi-bold">Type2</span>
            <br/><small class="font-weight-light d-block">Description</small>
          </td>
          <td><select class="form-control font-weight-normal text-gray" id="exampleFormControlSelect1">
            <option selected class="selected">2</option>
            <option>1</option>
            <option>2</option>
            </select>
          </td>
          <td>2</td>
        </tr>

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

</body>
</html>

如何实现这种布局？表标题与内容不对齐，每行的内容也不垂直对齐

2 个答案: