侧边栏不左对齐 - Bootstrap答案

【问题标题】：Sidebar is not left-aligned - Bootstrap侧边栏不左对齐 - Bootstrap
【发布时间】：2021-01-15 09:53:17
【问题描述】：

我正在使用 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>

如果你需要更多信息，请你问我。

谢谢！

【问题讨论】：

我认为这是因为你，但你的部分 id #products 上的类 m-2，这也是你的 col-9。您在此列的左侧和右侧添加了一个边距，现在另一列不再适合并下降到新行。使用my-2 仅在 y 轴上添加边距（仅顶部和底部）
如果需要空间，请将 m-2 替换为 p-2

标签： html css bootstrap-4 flexbox

【解决方案1】：

你的主 div 上有一个 m-2 类。这意味着边距正在应用于 div。如果您将代码更新为此它应该可以工作

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

div 和 side 上的边框也可能将每个边框的宽度推宽。所以试试有无边框。

【讨论】：

谢谢！！，你是对的。这是因为 m-2 类。
很好，很乐意提供帮助。祝你学习顺利