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

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

-编辑-----

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

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>

希望对您有所帮助！

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

1 个答案: