【解決方法】テーブルを左ではなく右に伸ばす


こんにちはチーム

注文概要の表が右から伸びず、空のスペースがあります。 ブートストラップでこれを達成するにはどうすればよいですか?

私が試したこと:

<!-- 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 つのクラスを削除します。

グリッドシステム・Bootstrap v4.6[^]

コメント

タイトルとURLをコピーしました