个人中心
gpt4 book ai didi

html - Bootstrap 4 主要内容和侧边栏的总体布局问题

转载 作者：太空宇宙 更新时间：2023-11-04 06:43:05 25 4
gpt4 key购买 nike

我的网站总体布局存在一些问题，特别是我的主要内容区域和边栏的定位方式。我的草稿布局是:

enter image description here

我正在使用以下代码来创建它(它分布在几个不同的文件中，因为这是一个 Symfony 3.4 元素)-

base.twig.html:

{# app/Resources/views/base.html.twig #}

<!DOCTYPE html>
<html dir="ltr" lang="en-us">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <meta name="keywords" content="Sewing Diva, online shopping, online store, shop, store, quilting, quilts, sewing, sew, fabrics, patterns, notions, gift shop, gifts, Derry NH">
    <meta name="description" content="The Sewing Diva Quilt and Gift Shop offers customers many fabrics, patterns, and notions to buy online">
    {% block noindex %}{% endblock %}
    <title>{% block title %}The Sewing Diva Quilt and Gift Shop{% endblock %}</title>
    {% block stylesheets %}
        {{ encore_entry_link_tags('app') }}
    {% endblock %}
    <link rel="apple-touch-icon" sizes="152x152" href="{{ asset('build/favicons/apple-touch-icon.png') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('build/favicons/favicon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('build/favicons/favicon-16x16.png') }}">
    <link rel="manifest" href="{{ asset('build/favicons/site.webmanifest') }}">
    <link rel="mask-icon" href="{{ asset('build/favicons/safari-pinned-tab.svg') }}" color="#5bbad5">
</head>
<body>
<div id="site" class="container-fluid">
    <nav class="navbar navbar-expand-lg navbar-light bg-light-blue border-bottom border-burnt-orange" style="border-bottom-width: 4px !important;">
        <a class="navbar-brand" href="{{ path('_home') }}">
            <img src="{{ asset('build/images/logo-sm.png') }}" class="d-lg-none">
            <img src="{{ asset('build/images/logo.png') }}" class="d-none d-lg-block">
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <form class="form-inline my-2 pt-5 my-lg-0 mx-auto d-none d-lg-inline w-50" action="{{ path('_store_search_results') }}">
                <div class="input-group">
                    <input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
                    <div class="input-group-append">
                        <button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
                    </div>
                </div>
            </form>

            <div class="navbar-nav color-dark-blue ml-auto flex-lg-column align-items-lg-start justify-content-lg-center">
                <div class="nav-item mb-lg-5">
                    <div class="d-none d-lg-block">
                        <a class="nav-link d-lg-inline" href="{{ path('fos_user_security_login') }}">Login</a> | <a class="nav-link d-lg-inline" href="{{ path('fos_user_registration_register') }}">Sign Up</a>
                    </div>
                </div>

                <div class="nav-item mb-lg-3">
                    <div class="d-none d-lg-block social-media">
                        <a class="nav-link d-lg-inline-block" href=""><i class="far fa-envelope"></i></a>
                        <a class="nav-link d-lg-inline-block" href=""><i class="fab fa-facebook-square"></i></a>
                        <a class="nav-link d-lg-inline-block" href=""><i class="fab fa-twitter"></i></a>
                    </div>
                </div>

                <a class="nav-link d-lg-none" href="{{ path('fos_user_security_login') }}">Login</a>
                <a class="nav-link d-lg-none" href="{{ path('fos_user_registration_register') }}">Sign Up</a>
            </div>

            <form class="form-inline my-2 my-lg-0 mx-auto d-inline d-lg-none" action="{{ path('_store_search_results') }}">
                <div class="input-group">
                    <input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
                    <div class="input-group-append">
                        <button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
                    </div>
                </div>
            </form>
        </div>
    </nav> <!-- end nav -->
    <div class="row justify-content-center">
        {% block sidebar %}{% endblock %}
        {% block content %}{% endblock %}
    </div> <!-- end content -->
    <div id="footer" class="row"> <!-- TODO: a real footer -->
        <p id="copyright">&copy; The Sewing Diva</p>
        <p id="mp">Site created and maintained by Major Productions</p>
    </div> <!-- end footer -->
</div> <!-- end site -->

{% block js %}
    {{ encore_entry_script_tags('app') }}
    <script src="https://js.stripe.com/v3/"></script> <!-- For fraud protection -->
{% endblock %}

<script type="text/javascript">
    var success = $('#flash-success');
    var error = $('#flash-error');

    if (success.length > 0) {
        success.fadeOut({ duration : 5000 });
    }

    if (error.length > 0) {
        error.fadeOut({ duration : 5000 });
    }
</script>

{% block jscode %}{% endblock %}
</body>
</html>

index.twig.html:

{# app/Resources/views/Store/index.html.twig #}

{% extends 'base.html.twig' %}

{% block title %}
    {{ parent() }}
{% endblock %}

{% block sidebar %}
    <div class="col-md-3 bg-beige container">
       {{ render(controller('AppBundle:Store:categoryList')) }} <!-- figure out indents -->
    </div>
{% endblock %}

{% block content %}
    <div class="col-md-9 border container" id="content">
        {% if newestProducts == null %}
            There's nothing in the store to buy yet!  Please check back later.
        {% else %}
            <h2>Our latest item:</h2>
            <div class="row">
                <div class="jumbotron" style="background: transparent">
                    <!-- TODO: figure out structure -->
                </div>
            </div>

            <h2>Some more recent items:</h2>
            <div class="row">
                {% for newestProduct in newestProducts[1:] %}
                    <div class="col-md-3">
                        <div class="card">
                            <img class="card-img-top w-100" src="{{ asset('product_images/' ~ newestProduct.filename) }}">
                            <div class="card-body">
                                <h5 class="card-title">{{ newestProduct.name }}</h5>
                                {#{% if newestProduct.description != null %}<p class="card-text">{{ newestProduct.description }}</p>{% endif %}#}
                                <p class="card-text">${{ newestProduct.price }}/{% if newestProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
                                <a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': newestProduct.slug, 'prodId': newestProduct.id}) }}">Check it out!</a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}

        {% if saleProducts == null %}
        {% else %}
            <h2>Some items currently on sale:</h2>
            <div class="row"> <!-- card deck instead? -->
                {% for saleProduct in saleProducts %}
                <div class="col-md-3">
                    <div class="card">
                        <img class="card-img-top w-100" src="{{ asset('product_images/' ~ saleProduct.filename) }}">
                        <div class="card-body">
                            <h5 class="card-title">{{ saleProduct.name }}</h5>
                            {% if saleProduct.description != null %}<p class="card-text">{{ saleProduct.description }}</p>{% endif %}
                            <p class="card-text">${{ saleProduct.price }}/{% if saleProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
                            <a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': saleProduct.slug, 'prodId': saleProduct.id}) }}">Check it out!</a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        {% endif %}

        {% if randomProducts == null %}
            There's nothing in the store to buy yet!  Please check back later.
        {% else %}
            <h2>Some other things you may like:</h2>
            <div class="row">
            {% for randomProduct in randomProducts %}
                <div class="col-md-3">
                    <div class="card">
                        <img class="card-img-top w-100" src="{{ asset('product_images/' ~ randomProduct.filename) }}">
                        <div class="card-body">
                            <h5 class="card-title">{{ randomProduct.name }}</h5>
                            {% if randomProduct.description != null %}<p class="card-text">{{ randomProduct.description }}</p>{% endif %}
                            <p class="card-text">${{ randomProduct.price }}/{% if randomProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
                            <a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': randomProduct.slug, 'prodId': randomProduct.id}) }}">Check it out!</a>
                        </div>
                    </div>
                </div>
            {% endfor %}
            </div>
        {% endif %}
    </div>
{% endblock %}

category_list.twig.html:

{# do something with htmlTree - remember: this DOES NOT contain blocks, or inherit from base.html.twig #}

<h2>Shop By Category:</h2>
<p><a href="">Newest Products</a></p>
<p><a href="">Products on Sale</a></p>

{{ htmlTree|raw }}

所有这些一起创建了以下内容:

enter image description here

我最大的问题是侧边栏/类别列表悬在导航上方。我猜 navbar 有一些 x 轴边距/填充。因此，我想将两列(边栏和内容)限制在 navbar 的可见宽度内。理想情况下，导航栏 的左侧/右侧不会有任何空白区域。

我认为我可以通过摆弄列、边距和填充的组合来处理其余部分，但优先考虑使所有内容在边缘保持一致。

最佳答案

改为将容器放入您的导航栏

<div id="site">
    <nav class="navbar ...">
        <div class="container-fluid">
            <a class="navbar-brand" ... />
            <button class="navbar-toggler" ... />
            <div class="collapse" ... />
        </div>
    </nav>
</div>

容器通常有左右内边距。如果将带有背景颜色的 navbar 放在容器内，它会在水平方向上显示一个间隙。

关于html - Bootstrap 4 主要内容和侧边栏的总体布局问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53508776/

25 4 0
文章推荐： c - 尝试打印指针值时出现堆异常
文章推荐： Python PID模拟
文章推荐： Java Web 从 Java 应用程序启动 Eclipse
文章推荐： c - 结构中的二维数组 - 可能吗？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com