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

时间：2018-11-27 21:54:04

标签： html css bootstrap-4

我的网站总体布局存在一些问题，尤其是主要内容区域和侧边栏的位置。我的粗略草稿布局是：

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的可见宽度内。理想情况下，navbar的左右两侧没有空格。

我认为我可以通过摆弄列，边距和填充的组合来处理其余部分，但保持边缘上的所有内容均匀是一个优先事项。

1 个答案:

答案 0 :(得分：1)

将容器放入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的背景色放入容器中，它将在水平方向显示一个间隙。

相关问题
最新问题