个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我刚开始使用 Bootstrap 4 并尝试主要使用 Bootstrap 类而不是使用 CSS。我有 2 个堆叠的导航栏，我想像空格一样展开导航项，这样它会占用页面的整个宽度，而不是全部向左堆叠。我弄乱了 d-flex 类并在 ul 中尝试了一些 flex-box。但它不起作用。
.text-spLeft{
margin-left: 5px;
}
.text-spRight{
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="./header.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<div class="nav1">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="./images/dnowlogo.png" class="img-responsive">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="line-group">
<div class="text-right">
<p>Your nearest Location is stfford,tx 77477<span class="text-spLeft"><a href="#">Change</a></span></p>
</div>
<ul class="navbar-nav d-flex justify-content-between ">
<li class="nav-item ">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Contact Us</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Contact Us</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Contact Us</a>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
United States
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Australia</a>
<a class="dropdown-item" href="#">Canada</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">India</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="nav2">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button> -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav justify-content-between">
<!-- <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="#">Link</a>
</li> -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Products and Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Solutions
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Industries
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Resources Center
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Location</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>
<!-- <li class="nav-item ">
<img src="./images/dnowlogo.png" class="img-responsive">
</li> -->最佳答案
为了让所有 flexbox 相关的类工作(包括你的 justify-content-{lg-}between)你还需要添加:
d-{lg-}flex 和...w-100没有第一个，display 就不是 flex 并且 flex 属性不适用。
没有第二个，justify-content 被设置为 space-between，但元素不会拉伸(stretch)到 100% 所以有没有可分配的正空间。
.text-spLeft {
margin-left: 5px;
}
.text-spRight {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./header.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<div class="nav1">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="./images/dnowlogo.png" class="img-responsive">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="line-group">
<p>Your nearest Location is stfford,tx 77477<span class="text-spLeft"><a href="#">Change</a></span></p>
</div>
<ul class="navbar-nav d-flex justify-content-between w-100">
<li class="nav-item ">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Contact Us</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Contact Us</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Contact Us</a>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
United States
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Australia</a>
<a class="dropdown-item" href="#">Canada</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">India</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="nav2">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button> -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav justify-content-lg-between w-100 d-lg-flex">
<!-- <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="#">Link</a>
</li> -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products and Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Solutions
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Industries
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resources Center
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Location</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>
<!-- <li class="nav-item ">
<img src="./images/dnowlogo.png" class="img-responsive">
</li> -->注意:我还删除了 .line-group 包装器，因为它会干扰导航栏布局。
关于css - Bootstrap 4 navbar flex 之间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51776469/
25
4
0
我仍在学习网页设计的诀窍，并且我无法理解一些事情是如何工作的...... 我创建了一个函数来切换导航栏标题背景颜色，我发现以下内容是正确的，但不确定原因: 作品: $(".navbar.navbar-
在 Twitter bootstrap 2.3.2 中，我可以有类似的东西: http://jsfiddle.net/aQwUZ/3/
我是 bootstrap、jquery 和 javascript 的新手，我在一个网站上工作，但我遇到了一个问题。 . .我需要顶部的导航栏在超小屏幕上以折叠状态加载。现在，该栏在 XS 屏幕上是垂直
我正在学习使用 Ruby on Rails 编写代码，并且正在制作一个随机网页。我添加了 Bootstrap 导航栏。 我正在尝试将导航栏的边框更改为无，而不是: .navbar { bord
每当我学习 ionic 的教程时，我都会看到短语 *navbar。这是什么意思？我知道 * 表示它在模板中插入标签，但无法真正理解这个表达式.. 最佳答
我不知道如何正确表达这一点，但我想做的是让顶部栏( http://puu.sh/iNdBj/7f11027db0.png )在向下滚动时折叠并在回到顶部时重新出现，我想让底部栏填充顶栏的位置。 目前的
这是我第一次使用 bootstrap，我使用 roots 主题作为准系统模板。我在 header-top-navbar.php 的 navbar-header 元素中放置了一个图像我还将它放在一个 d
在我网站的顶部，主要的导航类是: navbar navbar-default navbar-fixed-top bg 我正在努力做到这一点，当你滚动时，类会更改为这样我就可以创建一个更优雅、更简单的滚
这是我的问题: collapse problem 如您所见，我的 navbar-collapse div 进入了导航栏区域。你能帮我解决一下吗？ Title
我已经为类尝试了很多不同的选项来更改 navbar 上的文本颜色，特别是 navbar-brand 元素。我的 .navbar-brand color:purple; CSS 类没有运行。你能帮我弄清
我正在尝试使用 nav navbar-nav navbar-right 创建一个下拉菜单。我让它在移动设备(较小的屏幕)上对齐但是当我点击下拉菜单时它不会将菜单项向下推但是而是下拉其他菜单项。我不确定
我的导航栏没有改变颜色。 Navbar.jsx 文件中的 Navbar.css 文件的路径是否正确？ import React, { Component } from 'react'; import
我无法让我的 navbar-header 和 navbar-nav 元素正确排列。 navbar-header 在 navbar 中垂直居中，而 navbar-nav 看起来像是 align="top
当我的屏幕宽度达到 767px 时，导航会异常折叠。当我转到 768px 时，navbar-nav 会低于 navbar-brand。直到我达到 795px，navbar-brand 和 navbar
我正在尝试实现一个固定的导航栏，但是在一定的屏幕尺寸(〜宽度:989)之后，导航栏向下移动。它也不适用于移动设备。 图片: 导航栏完全贴在页脚上，而不是停留在页面顶部。 您可以在以下位置查看代码:ht
我正在尝试右对齐我的 NavBar，但每当我添加 float:right 时，导航栏都会向右移动，但似乎已禁用。 参见此处:goo.gl/46yUrt 代码: /** * 4.2 Navigatio
我正在使用 Bootstrap 4，我希望我的 navbar-toggler 出现在 navbar-brand 之前，例如 this ，但是如果我将 navbar-toggler 放在第一位，我的对齐
如何使 navbar-header 全宽或单独成一行？ 我在 collapse navbar-collapse 上添加了 clear:both; 但所有的填充都弄乱了。
.navbar 和 .navbar a 有什么区别 .navbar { overflow: hidden; background-color: #333;
在 Twitter bootstrap 的 starter-template.html 中，navbar 写成 ... 但是，如果我将标记更改为
我是一名优秀的程序员,十分优秀！