ブートストラップ4でカードクラスの左右に書式を入れてください

Question

同じ行に要素をラベル付けして選択したい場合は、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>

Answer 1

使用のプル右ありがとうございます。プル右フロート右に変化するブートストラップ4を、私は知っていることも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>