Question

这似乎是common problem。我没有任何自定义css，现在我没有使用崩溃（也许这是我的问题？），我怎样才能修复我的html，以便bootstrap的品牌布局正确？同时保留我正确的浮动/包装登录表格。

<template>
    <require from="bootstrap/css/bootstrap.css"></require>
    <header>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="">RPF</a>
                </div>
                <div class="navbar-right container-fluid">
                    <form show.bind="!isAuthenticated()" class="navbar-form">
                        <div class="form-group">
                            <input name="username" type="text" class="form-control" placeholder="username">
                            <input name="password" type="password" class="form-control" placeholder="password">
                        </div>
                        <button name="login" type="button" class="btn btn-default navbar-btn">Sign In</button>
                        <button name="register" type="button" class="btn btn-default navbar-btn">Register</button>
                    </form>
                    <form show.bind="isAuthenticated()" class="navbar-form">
                        <button name="logout" type="button" class="btn btn-default navbar-btn">Sign Out</button>
                    </form>
                </div>
            </div>
        </nav>
    </header>
    <div class="row container">
        <nav class="col-xs-3 col-md-2">
            <ul class="nav nav-pills nav-stacked">
                <li><a href="#">Manage Content</a></li>
            </ul>
        </nav>

        <main id="content" class="container-fluid">
            <router-view></router-view>
        </main>
    </div>
</template>

p.s Aurelia并不是特别相关，但这就是额外的语法来源。

Answer 1

这主要是因为在navbar-btn中使用了navbar-form类：请参阅Docs

将.navbar-btn类添加到不驻留在的<button>元素中 <form>将它们垂直居中在导航栏中。

您也不应该在表单周围使用此div <div class="navbar-right container-fluid">，使用<form class="navbar-form navbar-right">以及避免将container与row s组合在一个div中：{{ 1}}或嵌套容器。见Grid

工作示例： 在FullPage上打开

<div class="row container">

Answer 2

包括

FNR==1{ARGIND++}

在navbar-header中，所以它只能从左侧开始。你必须添加css并使其变得重要！重要。以便浏览器考虑您的更改

Navbar品牌偏离中心，尺寸不合适

2 个答案: