Question

我正在尝试创建一个只有徽标大小一部分的导航栏，并允许在其下方放置其他内容。像这样：

Example

下面的jsFiddle显示了我现在拥有的东西。黑色线条显示导航栏的底部，其已扩展为与图像相同的大小。

我已尝试将导航栏的高度设置为50px，但这会导致其下方的所有内容向上移动（这会导致布局关闭）。我也尝试用容器包围所有东西，但这似乎也没有用。我想任何解决方案都会涉及其中一个或两个，但我不确定如何实现它。

这是我的代码：

<div class ="container-fluid">
<a href="#" class="pull-left"><img id="logo" class="img-responsive" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQevVAv_ZVUfI8i5cMpRZGbIu71MGjPUqR70qR7F877JKyWJWdEXw"></a>

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
         data-target="#example-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 class="navbar-brand" href="#"><img class="img-responsive" src="img/logo.jpg"></a> -->
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
     <ul class="nav navbar-nav navbar-right">
       <li><a href="#">Search</a></li>
       <li><a href="#">Archives</a></li>
       <li><a href="#">Education</a></li>
       <li><a href="#">About</a></li>
     </ul>
   </div>
</nav>

任何建议都将不胜感激。

Answer 1

这将为您提供一个良好的起点，可以将列和导航元素混合在一起，同时保持一切有序和响应。

确保包含Bootstrap CSS，JS和jQuery，否则您的移动导航切换将无法打开。工作实例

.navbar.navbar-default {
  border-radius: 0px;
  border-left: transparent;
}
#navbar-collapse {
  border-bottom: 1px solid #266080;
}
.lower-nav {
  color: #fff;
  font-size: 20px;
  padding: 23px 20px;
  height: 78px;
  color: #266080;
  background-color: #fff;
  border-bottom: 6px solid #266080;
}
#brand-logo {
  background-size: cover;
  position: absolute;
}
#brand-logo img {
  width: 100%;
  height: 130px;
  min-width: 150px;
}
div.nopadding {
  padding: 0;
  margin: 0;
}
.nav-buttons {
  border-radius: 0px;
}
.navbar-brand {
  display: none;
}
.wrapper {
  height: auto;
  background-color: #fff;
  margin-top: 0px;
  padding: 10px 20px;
}
.well {
  background-color: transparent;
  border: 3px solid #428bca;
  border-radius: 0px;
  text-align: center;
  font-size: 25px;
}
@media (max-width: 768px) {
  .lower-nav {
    font-size: 20px;
    padding: 25px 20px;
  }
  .navbar-brand {
    display: block;
  }
}
@media (max-width: 480px) {
  .lower-nav {
    font-size: 18px;
    padding: 20px 10px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 col-sm-2 hidden-xs nopadding">
      <div id="brand-logo">
        <img src="http://placehold.it/350x350/266080/fff?text=Home" alt="Home" />
      </div>
    </div>
    <div class="col-md-10 col-sm-10 nopadding">
      <nav class="navbar navbar-default" role="navigation">
        <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 class="navbar-brand" href="#">Brand</a>

        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Search</a>

            </li>
            <li><a href="#">Archives</a>

            </li>
            <li><a href="#">Education</a>

            </li>
            <li><a href="#">About</a>

            </li>
          </ul>
        </div>
        <div class="lower-nav"><span class="title">Text here</span>

          <div class="btn-group pull-right">
            <div class="btn btn-info nav-buttons">Hello</div>
            <div class="btn btn-warning nav-buttons">Hello</div>
            <div class="btn btn-danger nav-buttons">Hello</div>
            <div class="btn btn-default nav-buttons">Hello</div>
          </div>
        </div>
      </nav>
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="well"> <a href="http://getbootstrap.com//">Bootstrap 3</a> 
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices enim id tortor tincidunt, eget mollis mauris gravida. Mauris sem leo, feugiat ut felis blandit, imperdiet egestas orci. Proin lacinia at massa fermentum facilisis. Donec laoreet
    facilisis nunc, sed posuere magna rhoncus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent augue ipsum, rhoncus vel tempus sed, vehicula non purus. Nunc sit amet consectetur risus. Integer eget justo ut sapien consectetur
    auctor id eu augue. Quisque ac elit congue, eleifend lectus a, tempor purus. In hac habitasse platea dictumst. Phasellus gravida massa arcu, sed sodales orci interdum vel. Curabitur ullamcorper leo mauris, ut interdum felis mollis id. Nunc porttitor
    egestas fringilla. Suspendisse volutpat sem quis sagittis fermentum. Fusce in laoreet elit. Etiam aliquam varius tincidunt.</p>
  <p>Nunc nisi justo, ultricies at lobortis et, fermentum at dolor. Nulla ultrices erat et erat egestas, in luctus justo pellentesque. In convallis purus ut pellentesque interdum. Curabitur in neque lectus. Nullam lobortis sodales elit, eu fringilla eros
    aliquet vel. Aliquam ac ipsum vel nunc vestibulum luctus nec sit amet mauris. Ut viverra ornare risus eu condimentum. Fusce sollicitudin volutpat nisl id dignissim. Sed malesuada dui at magna imperdiet, non accumsan odio imperdiet. Etiam tristique
    fermentum enim, vel dictum nulla fermentum ac. Etiam in bibendum nisi. Vestibulum neque lectus, vehicula eu sagittis ut, blandit sit amet mi.</p>
  <p>Maecenas lacinia vestibulum magna. Integer mollis varius ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sit amet tortor turpis. Cras pharetra tellus elit, nec iaculis erat pellentesque
    sit amet. Nullam varius felis vel velit fermentum, nec facilisis erat accumsan. Nullam facilisis orci quam, eget semper turpis dictum id. Aenean magna ante, lobortis id sollicitudin quis, dapibus nec nisi. Maecenas aliquet posuere lectus, a ultricies
    arcu sodales sodales. Proin dignissim facilisis consectetur. Pellentesque suscipit quis dui eget malesuada. Quisque cursus neque a faucibus egestas. Phasellus sed nulla scelerisque diam adipiscing suscipit. Etiam sit amet enim ultricies risus consequat
    vestibulum eu sit amet urna.</p>
  <p>Vivamus hendrerit eget augue viverra auctor. Praesent mi leo, facilisis vel nisi vitae, sodales rhoncus augue. Maecenas purus nunc, commodo at massa eu, blandit aliquet enim. Proin sem neque, imperdiet non arcu eu, sagittis malesuada est. Fusce enim
    neque, facilisis et mattis ut, vulputate sed justo. Vivamus elementum elit nunc, eget tempor erat adipiscing nec. Praesent vestibulum dapibus vehicula. Pellentesque viverra faucibus leo in ornare. Sed sodales faucibus tincidunt. Vivamus dignissim
    tristique libero sit amet aliquet. Donec ut nunc dolor. Duis molestie tortor mi, id auctor nisi ullamcorper et. Proin eu ante cursus, varius felis id, porta orci.</p>
  <p>Aliquam imperdiet scelerisque purus, nec sagittis mi auctor vitae. Maecenas sodales scelerisque massa, vitae iaculis neque tincidunt sed. Vivamus id imperdiet lectus. Fusce id tellus ut tellus volutpat hendrerit in at justo. Duis eu tempus nibh. Nunc
    consectetur euismod sapien, eget placerat metus tempor sit amet. Maecenas at sem ac purus dictum viverra. Praesent eu neque in metus congue dictum eu in dolor. Mauris a elit sem. Quisque non velit malesuada ligula aliquet lacinia. Donec congue, leo
    lacinia vulputate pulvinar, est justo venenatis nisi, sit amet condimentum massa sem sed urna. Duis eget pretium eros. Sed et rutrum leo, sit amet sollicitudin urna. Nullam dui augue, malesuada sed lectus sed, malesuada fringilla massa.</p>
</div>

Answer 2

您可以添加一行和一些列，如下所示。将图像放在左侧的第一列，然后放在第二列的导航栏中。

<div class="container-fluid">
<div class="row">
    <div class="col-md-2">
        <a href="#" class="pull-left">
            <img id="logo" class="img-responsive" src="http://i.imgur.com/yhGyJ8P.png" />
        </a>
    </div>

    <div class="col-md-10">
        <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle"
                        data-toggle="collapse" data-target="#example-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 class="navbar-brand" href="#">
                <img class="img-responsive" src="img/logo.jpg">
        </a> -->
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Search</a></li>
                    <li><a href="#">Archives</a></li>
                    <li><a href="#">Education</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
        </nav>
    </div>


</div>

Answer 3

http://jsfiddle.net/jx6e857y/

这是另一个可以用于某些bootstrap css覆盖的示例。

<强> HTML：切换导航

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<polygon fill="#D8D8D8" points="279,100 479,60 681,100 641,501 480,482 322,501 "/>
</svg>

CSS覆盖：（确保这是在您的bootstrap.css文件之后）

        </button>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <div class="container-fluid">
            <ul class="nav navbar-nav">
                <li><a href="#">Search</a>
                </li>
                <li><a href="#">Archives</a>
                </li>
                <li><a href="#">Education</a>
                </li>
                <li><a href="#">About</a>
                </li>
            </ul>
            <br />
            <ul class="nav navbar-nav">
                <li><a href="#"><i class="glyphicon glyphicon-road"></i></a>
                </li>
                <li><a href="#"><i class="glyphicon glyphicon-leaf"></i></a>
                </li>
                <li><a href="#"><i class="glyphicon glyphicon-phone"></i></a>
                </li>
                <li><a href="#"><i class="glyphicon glyphicon-link"></i></li>
            </ul>
          </div>
          <span class="additional-text">This is your additional text</span>
        </div>

    </nav>

Bootstrap - NavBar旁边的大徽标

3 个答案: