相关疑难解决方法(0)

Bootstrap 4将导航栏项目对齐到右侧

如何将导航栏项目对齐？

我想登录并注册到右边.但我尝试的一切似乎都不起作用.

这是我到目前为止所尝试的:

<div>围绕<ul>着属性:style="float: right"
<div>围绕<ul>着属性:style="text-align: right"
在<li>标签上尝试了这两件事
!important添加到最后再尝试所有这些东西
改变nav-item以nav-right在<li>
添加了一个pull-sm-right类<li>
添加了一个align-content-end类<li>

这是我的代码:

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" …

Run Code Online (Sandbox Code Playgroud)

css navbar flexbox twitter-bootstrap bootstrap-4

Luu*_*ter

2018 12-21

295
推荐指数

12
解决办法

39万
查看次数

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

我无法将我的内容集中在引导程序导航栏中.我正在使用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

Nic*_* lK

2017 08-15

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

Ast*_*arp

2018 04-16

54
推荐指数

4
解决办法

14万
查看次数

将一个元素置于Bootstrap 4 Navbar中

无论我尝试什么,我都无法在Bootstrap导航栏中找到一些东西,任何解决方案呢？

我已经尝试添加div,使用margin:0 auto;或margin-right:auto; margin-left:auto;使用center-block类.没有什么可行的,为什么很难实现这么简单我无法理解的东西,我做错了什么？

这是当前的代码:

<nav class="navbar navbar-fixed-top navbar-dark main-nav">
<div class="container">
    <ul class="nav navbar-nav pull-left">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Download</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>

    <ul class="nav navbar-nav text-center">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav pull-right">
        <li class="nav-item">
            <a class="nav-link" href="#">Rates</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</div>

Run Code Online (Sandbox Code Playgroud)

css navbar twitter-bootstrap bootstrap-4

LuT*_*uTz

2018 04-23

44
推荐指数

2
解决办法

12万
查看次数

我如何将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,因为我想学习,所以我不必再继续回到这里.

编辑:

就像他们在这里居中一样^.

css centering navbar twitter-bootstrap

Ash*_*own

2017 05-09

11
推荐指数

1
解决办法

4万
查看次数

在 Bootstrap 导航栏中居中我的文本

我正在使用 Bootstrap 创建导航栏，但文本位于左侧。我根本无法弄清楚如何使文本位于导航栏的中心并在不同设备上调整大小和查看站点时保持在那里。我试过绕过浮动：左；使用下面的代码，但我仍然无法弄清楚。

body {
    font-family: century gothic;
}

.nav {
    display: inline-block;
    float: none;
}

.li {
    text-align: center;
}

.footer {
    background-color: #263238;
    height: 5%;
}

.footer-text {
    color: white;
    font-size: 20px;
    text-align: center;
    margin-top: 12px;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>My Website</title>
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
   <body>
      <nav class="navbar navbar-default">
      <div class="container-fluid-nav">
         <div>
            <ul class="nav navbar-nav">
               <li><a href="#">CSGO</a>
               </li>
               <li><a href="#">ARMA III</a>
               </li> …

Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap

作者

2017 08-15

5
推荐指数

2
解决办法

3万
查看次数

如何实现 RTL bootstrap 4 导航栏？

我想制作我的引导导航栏 RTL。这是右侧的徽标，链接从右向左流动。我尝试了不同的技巧，但都没有奏效。这是我现在拥有的代码：

<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark float-right">

    <!-- Brand -->
    <a class="navbar-brand" href="#">Logo</a>

    <!-- Links -->
    <div class="collapse navbar-collapse" id="nav-content">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
      </ul>
    </div>

</nav>

Run Code Online (Sandbox Code Playgroud)

如何修复此代码以实现 RTL 导航栏？

css navbar twitter-bootstrap bootstrap-4

Bab*_*abr

2018 12-27

5
推荐指数

1
解决办法

9340
查看次数

Bootstrap 4：带有徽标和2行的Navbar

我正在尝试使用Bootstrap 4创建一个符合以下示意图的网站标题：

我用于实现此目的的代码如下（省略了冗长的代码）：

<div class="navbar">
  <div class="container yellow">
    <div class="row">
      <div class="col-sm-4 green">Logo</div>
      <div class="col-sm-8 green">
        <div class="row">
          <div class="col text-right red">
            (00) 1234 5678
          </div>
        </div>
        <div class="row">
          <div class="col text-right red">
            <!-- nav links here -->
            <a href="#">link</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

唯一的自定义CSS是更改背景颜色以匹配原理图的颜色。

这将导致以下呈现的HTML页面，其中该行不跨越容器：

但是，在Bootstrap 3中这不是问题。仅将框架更改为Bootstrap 3才能提供正确的布局：

另外，如果从容器的navbar父级中删除了容器（及其嵌套内容），则可以在Bootstrap 4中实现正确的布局：

在仍然使用navbar类的同时，我需要在Bootstrap 4中做什么来实现所需的布局？

html navbar twitter-bootstrap bootstrap-4

Jos*_*osh

2018 03-05

4
推荐指数

2
解决办法

9399
查看次数

Bootstrap 4 导航栏将徽标中心对齐并在左侧切换图标

我想让徽标居中，链接位于导航栏的左侧，当它们在小型设备中折叠时，切换按钮应出现在左侧，此处出现在右侧，并且徽标应固定（不折叠）

<nav class="navbar navbar-expand-sm navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Run Code Online (Sandbox Code Playgroud)

navbar twitter-bootstrap bootstrap-4

Md *_*ash

2018 06-19

3
推荐指数

1
解决办法

2万
查看次数

具有品牌中心的Bootstrap 4导航栏，左侧，中心和右侧均具有链接

我想创建一个以品牌为中心的导航栏，并在中心的左侧和右侧提供链接。像本网站上使用的一样：https : //www.clarks.es/

目前，我有下一个导航栏，但我也需要在中心提供链接。

<nav class="navbar navbar-dark navbar-expand-md bg-success justify-content-between">
  <div class="container-fluid">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="navbar-collapse collapse dual-nav w-50 order-1 order-md-0">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>

    <a href="/" class="navbar-brand mx-auto d-block text-center order-0 order-md-1 w-25">Brand</a>

    <div class="navbar-collapse collapse dual-nav w-50 order-2">
      <ul class="nav navbar-nav ml-auto">
        <li class="nav-item"><a class="nav-link" href="">Link 1</a></li>
        <li class="nav-item"><a class="nav-link" href="">Link …

Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap bootstrap-4

Leo*_*eoh

2019 08-28

3
推荐指数

1
解决办法

2344
查看次数

响应式Bootstrap Navbar

我正在尝试为我的网站创建一个Navbar,左侧是下拉菜单,中间是图像,右侧是可折叠项目.我使用较少的bootstrap来设置导航栏的样式,但我遇到了麻烦.

我已经搜索了Stack溢出寻找方法来完成这项工作,就像这个问题一样,但那里的解决方案并不适用于我.我似乎无法将我的图像排成一行,以便其水平轴以下拉菜单,可折叠项和导航栏容器为中心.当我尝试上述链接中的解决方案时,通过最大化其位置固定将图像从页面流中取出,它总是出现在导航栏下方.我可以通过搞乱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;
}

Run Code Online (Sandbox Code Playgroud)

<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 …

Run Code Online (Sandbox Code Playgroud)

html css less twitter-bootstrap

rfj*_*001

2018 07-29

2
推荐指数

1
解决办法

2万
查看次数

如何使用下面的导航链接将 Boostrap 4 中的导航栏徽标居中

我似乎无法让导航栏徽标与其下方的导航链接中心对齐。我确定我遗漏了一些简单的东西，我已经查看了一些关于这个问题的其他帖子，但似乎都在使用旧版本的引导程序。我目前正在使用引导程序 4.0。

具体来说，我希望徽标位于单独的一行，而不是与链接位于同一行。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="img/h-tech-logo-cropped.png"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Our Services</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About Us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Gallery</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Contact Us</a>
    </li>
  </ul>
</div>

Run Code Online (Sandbox Code Playgroud)

html css navbar twitter-bootstrap bootstrap-4

c.g*_*m94

2018 04-12

1
推荐指数

1
解决办法

3125
查看次数

Bootstrap 4 导航栏与按钮右对齐，不会在移动设备上折叠

我试图在导航栏上放置 3 个元素。左对齐的品牌，右对齐的一组在移动设备上折叠的链接，以及一个与链接一样右对齐的附加按钮，但不应与它们一起折叠。

为了右对齐按钮和链接，我将它们包裹在 ml-auto div 中。这在移动设备上效果很好（第一张图片），但在 PC 上，按钮出现在链接上方（第二张图片）。我尝试将 btn-group 添加到 div 中，这种方法可行，但按钮与链接合并，看起来很奇怪（第三张图片）。

如何正确水平对齐这些组件？

请注意，我不希望该按钮与其他右侧链接位于同一组中。我希望即使在小屏幕上该按钮也始终可见。我在 SO 上看到过一些类似的问题，但它们在同一个可折叠组中都有正确对齐的项目，这对我来说没有好处。

您可以将以下代码粘贴到w3school TryIt 编辑器

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <a class="navbar-brand" href="#">Home</a>


<div class="ml-auto">
            <button class="btn btn-success">My Button</button>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto"/>
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Right Link 1</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Right Link 2</a>
                    </li>

                </ul>
        </div>
</nav>

Run Code Online (Sandbox Code Playgroud)

html css bootstrap-4

und*_*der

2018 08-15

1
推荐指数

1
解决办法

1万
查看次数