Question

我需要使用自举网格在td中并排放置3个下拉列表。

HTML

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<div class='col-xs-12'>
</div>
<table class="table table-hover">
  <thead>
    <tr>
      <th>Day</th>
      <th>Open 24h</th>
      <th>Open at</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col-xs-1">Monday</td>
      <td class="col-xs-1">
        <input type="checkbox" name="" value="">24Hours
      </td>
      <td class="col-xs-1">
        <select class="form-control">
                <option value="12"></option>
              </select>
      </td>
      <td class="col-xs-1">
        <select class="form-control">
                <option value="00"></option>
              </select>
      </td>
      <td class="col-xs-1">
        <select class="form-control">
                <option value="AM"></option>
              </select>
      </td>
    </tr>

＆＃13;

标题中的3个下拉列表必须低于打开。任何人都可以请求帮助，调整下拉菜单，使它们并排。

Answer 1

你的意思是这样的吗？只需要添加行和 col

{{1}}

Answer 2

<强>更新

这个怎么样？ https://jsfiddle.net/mps4Lb14/1/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
      integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"
        integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"
        crossorigin="anonymous"></script>
<div class='col-xs-12'>
</div>
<table class="table table-hover">
    <thead>
    <tr>
        <th>Day</th>
        <th>Open 24h</th>
        <th>Open at</th>
        <th>Closes at</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="col-xs-1">Monday</td>
        <td class="col-xs-1">
            <input type="checkbox" name="" value="">24Hours
        </td>
        <td class="col-xs-5">
            <div class = 'form-inline'>
            <select class="col-sm-2">
                <option value="12"></option>
            </select>
            <select class="col-sm-2">
                <option value="00"></option>
            </select>
            <select class="col-sm-2">
                <option value="AM"></option>
            </select>
            </div>
        </td>

        <td class="col-xs-5 " style='text-align:left;'>
            <div class = 'form-inline'>
            <select class="col-sm-2">
                <option value="12"></option>
            </select>
            <select class="col-sm-2">
                <option value="00"></option>
            </select>
            <select class="col-sm-2">
                <option value="AM"></option>
            </select>
            </div>
        </td>
    </tr>
    </tbody>
</table>

Bootstrap Grid并排表格中的下拉列表

2 个答案: