Question

我有以下HTML：

<nav class="navbar pr-navbar navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <div class="row">
            <div class="navbar-left">
                <a plat-tap='goBack()'><span class="fui-arrow-left pr-back"></span></a>
            </div>
            <div class="navbar-right">
                <a plat-tap='goHome()'><span class="glyphicon glyphicon-home pr-home"></span></a>
            </div>
            <p class="pr-navbar-text">Manage/Add Users</p>
            <div class="navbar-right">
                <div class="pr-add-item">
                    <a plat-tap='addUser()'><span class="fui-plus"></span></a>
                </div>
            </div>
        </div>
    </div>
</nav>

加上以下LESS：

@primaryColor: red;
@secondaryColor: blue;
@borderColor: white;
@textColor: white;

.pr-back{
  color: @textColor;
}

.pr-home{
  color: @textColor;
}

.pr-navbar-text{
  color: @textColor;
  text-align: center;
}

.pr-navbar {
  background-color: @secondaryColor;
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

body { padding-top: 75px; }
@media screen and (max-width: 768px) {
  body { padding-top: 53px; }
}

.pr-add-item {
  padding-right: 75px
}

出于某种原因，我的HTML中的row元素什么也没做。 plus图标始终放在所有其他按钮下方的一行中。我怎么能解决这个问题，所以我有一行左对齐按钮，中心文本和两个右对齐按钮？

Answer 1

在这里，我开始了这个小提琴。

<强> JSFiddle here

<nav class="navbar pr-navbar navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="nav navbar-nav navbar-left">
            <a plat-tap='goBack()'><span class="fui-arrow-left pr-back"></span></a>
        </div>
        <div class="nav navbar-nav navbar-right">
            <a plat-tap='goHome()'><span class="glyphicon glyphicon-home pr-home"></span></a>
        </div>
        <p class="nav navbar-nav pr-navbar-text">Manage/Add Users</p>
         <div class="nav navbar-nav navbar-right">
            <div class="pr-add-item">
                <a plat-tap='addUser()'><span class="glyphicon glyphicon-plus"></span></a>
            </div>
        </div>
    </div>
</nav>

此HTML更接近您想要的内容。您的原始HTML中包含一些不必要的标记，以及一些被排除的重要标记（如nav和navbar-nav）。我建议您阅读引导组件页面的this section以了解如何让NavBars更合作地工作。

（我更改了加号按钮和后退箭头按钮的字形，这样就可以显示一些内容而不包含平面ui）。

修改：改变JSFiddle，使文本可以在导航栏中居中。

Bootstrap不会停止向导航栏添加第二行

1 个答案: