Question

在Bootrap 4（alpha 6）中使用导航栏和容器时

<nav class="navbar navbar-static-top navbar-toggleable-md navbar-light bg-faded">

<div class="container">

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar-toggler-div" aria-controls="navbar-toggler-div" aria-expanded="false" aria-label="Navigation">
        <i class="fa fa-bars"></i>
    </button>

    <a class="navbar-brand" href="/">
        Band name here
    </a>

    <div class="collapse navbar-collapse" id="navbar-toggler-div">

        <ul class="navbar-nav">

            <li class="nav-item">
                <a class="nav-link" href="#">Foo</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#">Bar</a>
            </li>

        </ul>

    </div>

</div>

当屏幕非常小（如在手机上）时，品牌标识/文字（无所谓）和切换器 *集中精力 *做重叠（转换器不在品牌旁边，而是“在它上面”）

这也适用于其他导航栏类型（固定顶部，默认）。

在nav元素之后删除“container”时，一切都很好。

我需要容器div来拥有一个全宽度的导航栏，但它本身就是“居中”的（如下面的内容）。

Answer 1

我可以通过为容器添加以下css来“解决”它

[{"TxnDate": "Jan  1 2009 12:00:00:000AM", "TxnDateInt": "20090101", "LeaseID": "CANAGEO1", "FCWorkBook": "ZZZ None", "FASBEndDate": "", "FCLeaseNo": "0", "GLPostedStatus": "Posted", "SourceCode": "CH", "PaidStatus": "Paid", "FASBStartDate": "", "ActualProjected": "Charges", "Frequency": "M", "ID": "1", "FASBChargeEndDate": "", "CurrencyCode": "", "FASBChargeEffDate": "", "Dept": "None", "FASBOccDays": "", "SuiteID": "0301    ", "FCSuiteID": "ZZZ None", "EntityID": "495KINGW", "GLClosedStatus": "Closed", "RetroPD": "0", "FASBWeightedAmt": "", "Period": "200901", "IncomeCat": "41000 ", "OpenAmt": "0", "ChargeAmt": "2600", "Invoice": "200901    ", "BldgID": "495KINGW"}, {"TxnDate": "Jan  1 2009 12:00:00:000AM", "TxnDateInt": "20090101", "LeaseID": "CANAGEO1", "FCWorkBook": "ZZZ None", "FASBEndDate": "", "FCLeaseNo": "0", "GLPostedStatus": "Posted", "SourceCode": "CH", "PaidStatus": "Paid", "FASBStartDate": "", "ActualProjected": "Charges", "Frequency": "O", "ID": "2", "FASBChargeEndDate": "", "CurrencyCode": "", "FASBChargeEffDate": "", "Dept": "None", "FASBOccDays": "", "SuiteID": "0301    ", "FCSuiteID": "ZZZ None", "EntityID": "495KINGW", "GLClosedStatus": "Closed", "RetroPD": "0", "FASBWeightedAmt": "", "Period": "200901", "IncomeCat": "GST   ", "OpenAmt": "0", "ChargeAmt": "130", "Invoice": "200901    ", "BldgID": "495KINGW"}
]

@Escher：导航后的.container也在BS 4的官方CSS中，以及他们的文档中。所以我相信这是有目的的。

Answer 2

您的<div class="container">菜单中有一个额外的<nav> flexbox容器，不应该存在，因此bootstrap会尝试自动将所有项目对齐到中心。删除div即可。

这是您删除的<div class="container">后更新的小提琴： https://jsfiddle.net/p47Lqb9f/1/

Bootstrap 4（alpha 6）品牌以中心为重，并与交钥匙重叠

2 个答案: