响应式引导导航栏

问题描述 投票：0回答：4

我正在尝试为我的网站制作一个导航栏，左侧有一个下拉菜单，中间有图像，右侧有可折叠项目。我正在使用引导程序和 less 来设置导航栏的样式，但我遇到了麻烦。

我搜索了堆栈溢出，寻找实现此功能的方法，例如this问题，但那里的解决方案对我不起作用。我似乎无法让图像对齐，使其水平轴与下拉菜单、可折叠项目和导航栏容器居中。当我尝试前面提到的链接中的解决方案时，通过最大固定位置将图像从页面流中取出，它总是出现在导航栏下方。我可以通过修改 CSS 属性来修复屏幕上的这个问题，但是一旦我调整窗口大小，事情就会看起来很糟糕。

有没有一种方法（可能使用较少）来设置引导导航栏的样式，以便无论窗口的大小如何，我在左侧有一个项目，在中间有一个项目，在右侧有一个项目，所有这些都共享一个共同的水平中心轴与导航栏？

编辑

好吧，所以我改变了主意，决定在左侧添加一些链接，在中间添加一个图像，在右侧添加一些链接。当屏幕变小时，我希望链接折叠到右侧，提供菜单切换按钮。折叠工作正常，但是当链接位于屏幕上时，我希望它们与图像一起在导航栏中水平居中。现在的图像部分在导航栏中，部分在外面。我还希望当链接在较小的屏幕尺寸下折叠时图像向左滑动。这是我现在的代码：

请注意，我使用 django 来提供 html，因此使用图像 src 的语法。

#logo-with-slogan {
  max-width: 35%;
  padding: 3% 0 3% 0;
}

.navbar-brand {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  margin: auto;
}
<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="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
  </div>
  <a class="navbar-brand" href="#">
    <img id="logo-with-slogan" src="{% static " img/LogoWslogan.jpg " %}" />
  </a>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
      <li><a href="#itemonelink">Item One</a></li>
      <li><a href="#itemtwolink">Item Two</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#signuplink">Signup</a></li>
      <li><a href="#loginlink">Login</a></li>
    </ul>
  </div>
</nav>

html css twitter-bootstrap less
4个回答
5
投票

所以你想做这样的事情，并安装图像：

HTML

<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="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>    
    </div>
    <a class="navbar-brand navbar-center" href="#">
        <img src="http://placehold.it/100x40" alt="Logo Here">
    </a>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-left">
            <li><a href="#itemonelink">Item One</a></li>
            <li><a href="#itemtwolink">Item Two</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#signuplink">Signup</a></li>
            <li><a href="#loginlink">Login</a></li>
        </ul>
    </div>
</nav>

CSS

.navbar-brand {
    float: none;
    padding: 5px;
}
.navbar-center {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
    height:100%;
}

演示：JSFiddle

0
投票
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <h3>Navbar bootstrap</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

</body>
</html>
0
投票
return nav class navbar navbar-expand-lg navbar-light bg-light
div container 
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
   div collapse navbar-collapse" id="navbarNav"
  <ul className="navbar-nav">
            <li className="nav-item">
              <Link className="nav-link" to="/quiz">Quiz</Link>
            </li>
    cplr
   </ul>
        </div>
      </div>
    </nav>
-2
投票

导航栏是 Bootstrap 中最酷的组件，您可以轻松地为您的网站创建很酷的响应式导航标题。

有关信息和详细信息，请参阅这篇文章.. 在引导程序中创建导航栏的步骤

 <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#testNavBar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo / SiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="testNavBar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
      </ul>
     
    </div>
  </div>
</nav>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.