[ad_1]
こんにちはチーム
注文概要の表が右から伸びず、空のスペースがあります。 ブートストラップでこれを達成するにはどうすればよいですか?
私が試したこと:
<!-- Bootstrap navbar --> <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top"> <a class="navbar-brand" href="#">Your Brand</a> <div class="ml-auto"> <div class="navbar-nav"> <a href="basket.php" class="nav-item nav-link">class="fa fa-shopping-cart"><span id="cart-count" class="badge badge-pill badge-danger"><?php echo count($_SESSION['cart']) ?></span></a> </div> </div> </nav> <!-- Bootstrap card with table --> <div class="card mt-5 col-lg-9"> <div class="card-header"> Shopping Cart </div> <div class="card-body"> <table class="table"> <thead class="thead-dark"> <tr> <th>Product Id</th> <th>Product Name</th> <th>Quantity</th> <th>Discount</th> <th>Unit Price</th> <th>Total</th> </tr> </thead> <tbody> <?php while ($row = mysqli_fetch_assoc($result)) { ?> <tr> <td><?php echo $row['productId'] ?></td> <td><?php echo $row['product_name'] ?></td> <td><?php echo $row['quantity'] ?></td> <td><?php echo $row['discount'] ?></td> <td><?php echo $row['unit_price'] ?></td> <td><?php echo $row['total'] ?></td> </tr> <?php } ?> </tbody> </table> </div> </div> <!--Order summary form here --> <div class="card col-lg-3"> <div class="card-header"> <h5 class="card-title">Order summary</h5> </div> <div class="card-body"> <p class="text-muted">Shipping and additional costs are calculated based on the values you have entered.</p> <div class="table-responsive"> <table class="table"> <thead> <tr> <th>Order ID</th> <th>Shipping</th> <th>Subtotal</th> <th>Tax</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td id="orderId"></td> <td id="shipping"></td> <td id="subtotal"></td> <td id="tax"></td> <td id="total"></td> </tr> </tbody> </table> </div> <div class="card"> <div class="card-header"> <h5 class="card-title">Coupon code</h5> </div> <div class="card-body"> <p class="text-muted">If you have a coupon code, please enter it in the box below.</p> <form> <div class="input-group"> <input type="text" class="form-control"> <button type="button" class="btn btn-primary">class="fa fa-gift"></button> </div> <!-- /input-group--> </form> </div> </div> </div> </div>
HTML
解決策 1
その HTML には 2 つのテーブルがあります。 1つは包まれています col-lg-9
容器; もう一方は col-lg-3
容器。
画面の幅が 992px に達するとすぐに、 col-lg-9
コンテナーは、親の幅の 75% に制限されます。 の col-lg-3
コンテナは、親の幅の 25% に制限されます。
テーブルを画面の全幅に拡張する場合は、これら 2 つのクラスを削除します。
[ad_2]
コメント