相关疑难解决方法(0)

带有左,中或右对齐项目的Bootstrap NavBar

引导,什么是最平台友好的方式来创建一个导航栏,有徽标中的左边,在中心菜单项和标志B上的吧?

这是我到目前为止已经试过,它最终被对齐,使标志A是在左边,菜单项旁边的右边的左边和标志B中的标志.

<div class="navbar navbar-fixed-top navbar-custom ">
  <div class="container" >
    <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>
      <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">Menu Item 1</a></li>
        <li><a href="#contact">Menu Item 2</a></li>
        <li><a href="#about">Menu Item 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
      </ul>
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

html css navbar twitter-bootstrap bootstrap-4

364
推荐指数
9
解决办法
85万
查看次数

响应式引导程序导航栏中的中心内容

我无法将我的内容集中在引导程序导航栏中.我正在使用bootstrap 3.我读了很多帖子,但是使用的CSS或方法不能用于我的代码!我真的很沮丧,所以这就像我的最后一个选择.任何帮助,将不胜感激!

<!DOCTYPE html>
<html>
  <head>
    <title>Navigation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/style.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="container">
      <nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Link</a></li> …
Run Code Online (Sandbox Code Playgroud)

css navbar twitter-bootstrap

217
推荐指数
6
解决办法
54万
查看次数

在Bootstrap 3 Navbar中居中的品牌标识

我正在尝试实施Bootstrap 3导航栏,以便品牌徽标始终保持在中间位置.这是代码:

<div class="navbar navbar-fixed-top navbar-default">
  <div class="navbar-inner">
    <div class="container">

      <button type="button" style="float: left;" class="pull-left btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
    
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
    
                </button>

      <a class="brand" style="margin: 0; float: none;" href="#">
        <img src="/Content/themes/next/images/logo.png" /></a>

      <div class="nav-collapse">

        <ul class="nav">
          <li> <a href="#">Item 1</a></li>
          <li> <a href="#">Item 1</a></li>
          <li> <a href="#">Item 1</a></li>
        </ul>
      </div>

      <ul class="nav pull-right">
        <li>
          <a href="#">
            <div class="nextCog"></div>
          </a>
        </li>
      </ul>

      <span class="navbar-text pull-right">superpup1 </span>

    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

它制作了漂亮的导航栏: 在此输入图像描述

但是,我希望徽标(绿色)始终保持在中间位置.我将此样式添加到带有"品牌"类的标记中:

<a class="brand" style="margin: 0; float: …
Run Code Online (Sandbox Code Playgroud)

css twitter-bootstrap-3

54
推荐指数
4
解决办法
14万
查看次数

我如何将Twitter-Bootstrap 3导航栏链接中心?

如何将我设置的jsFiddle中的按钮居中,这样按钮的间距相等,并且在导航栏的中心和中心?

http://jsfiddle.net/3GQyq/3/

我尝试了不同的方法,比如

display:inline-block;margin:0 auto; text-align:center;
Run Code Online (Sandbox Code Playgroud)

但我无法让它发挥作用.

如果您可以提供一些解释,而不是仅仅修复CSS,因为我想学习,所以我不必再继续回到这里.

编辑:

http://img1.123freevectors.com/wp-content/uploads/icon_big/038_icon_beautiful-navigation-bar-free-vector.jpg 就像他们在这里居中一样^.

css centering navbar twitter-bootstrap

11
推荐指数
1
解决办法
4万
查看次数