使用bootstrap 4将表单放入卡类的左侧和右侧

时间：2017-12-05 09:33:09

标签： html bootstrap-4

我想标记并选择同一行中的元素，并使用form-inline成功。然后我想将它们放在左侧和右侧，text-left和text-right就像这段代码一样，但不起作用。

你能帮帮我们吗？谢谢 

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Our Products Table -->
      <div class="col-md-8">
        <div class="card">
          <div class="card-header text-secondary">
            <h6><i class="fa fa-table"></i> Our Products</h6>
          </div>
          <div class="card-body">
            <div class="row mb-2 text-muted">
              <div class="col-md-6 text-left">
                <form class="form-inline">
                  <div class="form-group">
                    <label for="showRows">Showing &nbsp;</label>
                    <select class="form-control">
                      <option>10</option>
                      <option>25</option>
                      <option>50</option>
                      <option>100</option>
                    </select>
                    <label>&nbsp; entries</label>
                  </div>
                </form>
              </div>
              <div class="col-md-6 text-right">
                <form class="form-inline">
                  <div class="form-group">
                    <label for="showSearch">Search: &nbsp;</label>
                    <input type="search" class="form-control">
                  </div>
                </form>
              </div>
            </div>
            <table class="table table-bordered table-sm border border-top-0">
              <thead class="bg-light text-secondary">
                <th>#</th>
                <th>Name</th>
                <th>Category</th>
                <th>Company</th>
                <th>Date</th>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Cocomax</td>
                  <td>Minuman</td>
                  <td>PT. Asiatic Agro Industry</td>
                  <td>Published, 2017/08/12</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="card-footer text-muted">

          </div>
        </div>
      </div>
      <!-- End our products table -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

1 个答案:

答案 0 :(得分：0)

在表单上使用pull-right。另请参阅Left align and right align within div in Bootstrap 

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Our Products Table -->
      <div class="col-md-8">
        <div class="card">
          <div class="card-header text-secondary">
            <h6><i class="fa fa-table"></i> Our Products</h6>
          </div>
          <div class="card-body">
            <div class="row mb-2 text-muted">
              <div class="col-md-6 text-left">
                <form class="form-inline">
                  <div class="form-group">
                    <label for="showRows">Showing &nbsp;</label>
                    <select class="form-control">
                      <option>10</option>
                      <option>25</option>
                      <option>50</option>
                      <option>100</option>
                    </select>
                    <label>&nbsp; entries</label>
                  </div>
                </form>
              </div>
              <div class="col-md-6 text-right">
                <form class="form-inline pull-right">
                  <div class="form-group">
                    <label for="showSearch">Search: &nbsp;</label>
                    <input type="search" class="form-control">
                  </div>
                </form>
              </div>
            </div>
            <table class="table table-bordered table-sm border border-top-0">
              <thead class="bg-light text-secondary">
                <th>#</th>
                <th>Name</th>
                <th>Category</th>
                <th>Company</th>
                <th>Date</th>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Cocomax</td>
                  <td>Minuman</td>
                  <td>PT. Asiatic Agro Industry</td>
                  <td>Published, 2017/08/12</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="card-footer text-muted">

          </div>
        </div>
      </div>
      <!-- End our products table -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

相关问题
最新问题