侧边栏不是左对齐的 - Bootstrap

Question

I'm practicing with Bootstrap and this element in the sidebar stays at the bottom and not to the right as it should appear.我正在使用 Bootstrap 进行练习，侧栏中的这个元素保持在底部而不是应该出现的右侧。

I've tried floating it to the right but it doesn't change position.我试过将它向右浮动，但它不会改变位置。

Here you are the code use it.在这里你是使用它的代码。

I don't know what else I could try so I appreciate your help.我不知道我还能尝试什么，所以我很感激你的帮助。

HTML: 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>

If you need more information, please can you ask me.如果您需要更多信息，请询问我。

THANKS!谢谢！

Answer 1

Your main div has got a class of m-2 on it.您的主 div 上有一个 m-2 类。 Which means margin is being applied to the div.这意味着边距正在应用于 div。 If you update your code to this it should work如果您将代码更新为此，它应该可以工作

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

The border on the div and aside might also be pushing the width of each to wide. div 上的边框和旁边的边框也可能将每个边框的宽度推得更宽。 So try with and without border.所以试试有无边框。

侧边栏不是左对齐的 - 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