Question

当徽标折叠时我将徽标放在中央，打开更宽的屏幕也有任何方法/技巧，目前代码看起来像这样，徽标出现在左侧，这是不希望的，

标题的CSS，

     header
     {
        background-image: url("../images/header.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 150px;
     } 




 <header>
      <div class="navbar navbar-inverse" role="navigation">
         <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                   <span class="sr-only">Toggle navigation</span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                </button>
                <a href="javascript:void;"><img id="logo" src="images/logo.png"></a>
             </div>

             <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#">Home</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#about">About</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#contact">Protfolio</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#">Blog</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#about">Services</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 140px; margin-left: 14px; margin-top: 28px; font-family: sans-serif;" href="#contact">Contact Me</a></li>
                </ul>
             </div>

          </div>
      </div>
 </header>

在<li>中放置徽标时，它会显示在更宽屏幕的中央，但它会显示在小屏幕上的折叠列表中。目前它看起来像 enter image description here

Answer 1

我不确定是否理解所有内容，但我会先复制徽标。

第一个徽标：

此设备适用于小型设备，并放置在.navbar-toggle元素中您需要添加一些CSS行来居中。

第二个徽标：

这个适用于较大的设备，并放在您的链接列表中您必须将.hidden-sm和.hidden-xs类添加到<li>元素，以避免将其放入折叠列表中（在小型设备上）

<header>
      <div class="navbar navbar-inverse" role="navigation">
         <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                   <span class="sr-only">Toggle navigation</span>
                   <img class="logo" src="http://placehold.it/95/3498db/fff">
                </button>
             </div>

             <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="hidden-xs hidden-sm"><a href="#" class="logo-link"><img class="logo" src="http://placehold.it/95/3498db/fff"></a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#">Home</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#about">About</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#contact">Protfolio</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#">Blog</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#about">Services</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 140px; margin-left: 14px; margin-top: 28px; font-family: sans-serif;" href="#contact">Contact Me</a></li>
                </ul>
             </div>

          </div>
      </div>
 </header>

@media (max-width: 768px) {
    .navbar-header {
        text-align: center;
    }
    .navbar-toggle {
        float: none;
    }
}

Bootply

注意：我建议避免使用内联样式。

Answer 2

诀窍是通过CSS - 在媒体查询中，对于较小的屏幕，隐藏此徽标。

@media (max-width: 600px) {
  li.className{
   display: none;
  }
}

Bootstrap 3导航栏标志放置在中心

2 个答案: