具有切换导航功能的引导响应导航栏

Question

我正在寻找创建一个新的项目模板，以便将Wordpress Template转换为Bootstrap Template。

我正在开发navbar，我遇到了一个关于responsive-design和toggle-navigation的问题

当我在laptop device中时，我的导航栏是我想要的定义良好的。但是，以smartphone device为例，切换导航并不能显示我想要的导航栏。尤其是使用navbar-left和navbar-right。

笔记本电脑设备：

​

​

智能手机设备：

​

​

我希望在智能手机视图中所有元素垂直对齐，而www.coe.int和languages with glyphicons并非如此

这是我的HTML脚本：

<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <!-- Collection of nav links and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-left">
                  <li><a id="coe" href="http://www.coe.int">WWW.COE.INT</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-middle">
                <li><a class="active" href="#">EUROPEAN PHARMACOPOEIA</a></li>
                <li><a href="#">PHARMEUROPA</a></li>
                <li><a href="#">OTHER PUBLICATIONS</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Languages</a></li>
                <li><a><span class="glyphicon glyphicon-search"></span></a></li>
            </ul>
        </div>
    </div>
</nav>

和我的CSS部分：

body {
    font-family:sans-serif;
    font-size: 1.25em;
}

/* ######################## */
/*        HEADER PART       */
/* ######################## */

header{
    background-color:  #e8e8e8;
}

header a{
    color:  #a5a5a4;
}

/* Bootstrap Stuff */

nav.navbar.navbar-default.navbar-static-top {
    background-color: #e8e8e8;
}

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

a#coe {
    font-weight: bold;
    text-decoration: none;
}

ul.nav.navbar-nav.navbar-middle > li > a:hover {
    background-color: #1b7eac;
    color: black;
    transition: all 0.2s;
       }


ul.nav.navbar-nav.navbar-middle > li > a:focus{
    background-color: #1b7eac;
    color: white;
    transition: all 0.2s;
       }

你能帮我找到一个解决方案吗？

Answer 1

不幸的是，我的名声不允许我发表评论，因为这肯定是一个评论。但是，您是否尝试过使用媒体查询来简单地更改文本大小以获得您想要的结果？

编辑

我假设你已经有了切换按钮。在这种情况下，如果您希望垂直对齐它们，可以使用bootstrap运算符

col-sm-4 (用于垂直对齐的三个项目)

col-sm-3 (用于4个项目垂直对齐)

这将为每个元素提供自己的空间，并垂直对齐它们。

但请记住，您需要有一个容器，然后像这样排，然后是这个属性：

<div class="container">
    <div class="row">
        <div class="col-sm-4">item here</div>
        <div class="col-sm-4">item here</div>
        <div class="col-sm-4">item here</div>
    </div>
</div>

我希望这对你有帮助！