側邊欄不是左對齊的 - Bootstrap

Question

我正在使用 Bootstrap 進行練習，側欄中的這個元素保持在底部而不是應該出現的右側。

我試過將它向右浮動，但它不會改變位置。

在這里你是使用它的代碼。

我不知道我還能嘗試什么，所以我很感激你的幫助。

HTML：

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8" />
    <title>Aprendiendo Bootstrap</title>
    <link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css" />
</head>

<body>

    <div class="container border">
        <div class="row">


            <header id="header" class="col-12 bg-primary text-white p-2 pl-5">
                <h1>Aprendiendo Bootstrap</h1>
            </header>

            <nav id="menu" class="col-12 bg-secondary text-white">
                <ul class="row w-50">
                    <li class="col">Inicio</li>
                    <li class="col">Página 1</li>
                    <li class="col">Página 2</li>
                    <li class="col">Página 3</li>
                    <li class="col">Contacto</li>
                </ul>
            </nav>

            <section id="content" class="col-12">
                <div class="row">
                    <section id="products" class="col-9 border m-2">
                        <h2>Productos</h2>
                        <hr>
                        <div class="items">
                            <div class="row">
                                <div class="item col bg-primary m-2">
                                    Producto
                                </div>
                                <div class="item col bg-warning m-2">
                                    Producto
                                </div>
                                <div class="item col bg-danger m-2">
                                    Producto
                                </div>
                            </div>


                            <div class="row mt-5">
                                <div class="item col bg-primary m-2">
                                    Producto
                                </div>
                                <div class="item col bg-warning m-2">
                                    Producto
                                </div>
                                <div class="item col bg-danger m-2">
                                    Producto
                                </div>
                                <div class="item col bg-success m-2">
                                    Producto
                                </div>
                            </div>


                            <div class="row mt-1 justify-content-around">
                                <div class="item col-3 bg-primary">
                                    Producto
                                </div>
                                <div class="item col-3 bg-warning">
                                    Producto
                                </div>
                                <div class="item col-3 bg-primary">
                                    Producto
                                </div>
                            </div>
                        </div>
                    </section>

                    <aside class="col-3 border">
                        <h2>Barra lateral</h2>

                        <div class="lateral row bg-light align-items-center">

                            <div class="col-4 bg-primary align-self-start">
                                Elemento 1
                            </div>
                            <div class="col-4 bg-success align-self-center">
                                Elemento 2
                            </div>
                            <div class="col-4 bg-warning align-self-end">
                                Elemento 3
                            </div>
                        </div>
                    </aside>

                </div>
            </section>

            <footer class="col-lg-12 bg-info">
                Máster en Bootstrap - Cristina Martínez&copy;
            </footer>
        </div>
    </div>

    <script type="text/javascript" src="JQuery/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="Bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

如果您需要更多信息，請詢問我。

謝謝！

Answer 1

您的主 div 上有一個 m-2 類。 這意味着邊距正在應用於 div。 如果您將代碼更新為此，它應該可以工作

<section id="products" class="col-9">
and
<aside class="col-3">

div 上的邊框和旁邊的邊框也可能將每個邊框的寬度推得更寬。 所以試試有無邊框。

側邊欄不是左對齊的 - Bootstrap

問題描述

1 個解決方案

解決方案1
0 已采納 2020-09-29 18:38:12

側邊欄不是左對齊的 - Bootstrap

問題描述

1 個解決方案

解決方案1 0 已采納 2020-09-29 18:38:12

解決方案1
0 已采納 2020-09-29 18:38:12