标签: twitter-bootstrap-4
Bootstrap 4:当徽标增加导航栏高度时,垂直对齐导航链接
我是Bootstrap 4框架的新手,但即使阅读了StackOverFlow上的所有文档和所有现有的B4问题,我仍然有点卡住了.
在我的导航栏中,我插入了一个高度和宽度为50px的SVG徽标.这会自动使导航栏更高.我没有为此调整任何CSS,它只是强制导航栏高度增加的徽标.
这是我的HTML:
<!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, user-scalable=no, initial-scale=1.0">
<title>@yield('title')</title>
<link rel="import" href="elements.html">
<link rel="stylesheet" href="/styles/app.css">
</head>
<body>
<header class="navbar navbar-light navbar-fixed-top bd-faded">
<div class="clearfix hidden-sm-up">
<button class="navbar-toggler pull-right" data-toggle="collapse" data-target="#navbar">
☰
</button>
<a href="/" class="navbar-brand">
<img src="/images/brand.svg" alt="Logo">
<span>Bootstrap</span>
</a>
</div>
<div class="collapse navbar-toggleable-xs" id="navbar">
<a href="/" class="navbar-brand">
<img src="/images/brand.svg" alt="Logo">
<span>Bootstrap</span>
</a>
<nav class="nav navbar-nav">
<div class="nav-item nav-link"><a href="#">Link 1</a></div>
<div class="nav-item nav-link"><a href="#">Link 2</a></div>
<div class="nav-item nav-link"><a …推荐指数
解决办法
查看次数
Bootstrap 4 Navbar右对齐
我正在使用Bootstrap 4网站上的导航栏模板,但我对崩溃导航项目的位置有疑问.最初,切换按钮位于导航栏的左侧以及列表项.
但是我希望它们位于页面的右侧,所以我在按钮和导航项上插入了一个float-xs-right类.然后,如果单击切换按钮,则折叠项目将无法正确定位.正如您在屏幕截图中看到的那样.
我希望折叠项目位于左下方和左侧.
顺便说一下,这是我的代码:
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>
<div class="collapse navbar-toggleable-md" id="main-navbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More info</a>
</li>
</ul>
</div>
</nav>
此外,这是我的导航栏的codepen:
http://codepen.io/marcvs/pen/PGvqBO
先感谢您.
推荐指数
解决办法
查看次数
Bootstrap 4:如何在容器中使用带有内容的全宽导航栏(如SO导航栏)？
我正在使用Bootstrap 4.
如何制作像SO导航栏一样的导航栏？
内容如同"容器"对齐,但在引导程序4中的"容器 - 流体"的宽度？
我想要"固定顶部"导航栏设置的宽度,而不是固定顶部和导航栏内容在"容器"中.
我想提供一个例子,但我想尝试制作与本页顶部的导航栏完全相同的东西.
css responsive-design twitter-bootstrap twitter-bootstrap-4 bootstrap-4
推荐指数
解决办法
查看次数
Bootstrap 4 - 如何更改导航的折叠方向？
默认情况下，Bootstrap 4 nanbar 折叠方向是“从上到下”。我想将其更改为“从右到左”。我怎样才能做到这一点？你可以在下面看到我的代码：
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<i class="fa fa-times close" aria-hidden="true"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav flex-row-reverse">
<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" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
推荐指数
解决办法
查看次数
侧边栏的 Twitter Bootstrap 文档中使用了什么组件？
我想知道使用 Bootstrap 4 构建这种侧边栏的最简单方法是什么。
对我来说，它看起来像是他们为文档页面构建的自定义组件，没有包含在框架中。我不确定我是否正确。
<ul class="nav bd-sidenav">
<li class="active bd-sidenav-active">
<a href="/docs/4.0/getting-started/introduction/">
Introduction
</a>
</li>
<li>
<a href="/docs/4.0/getting-started/download/">
Download
</a>
</li>
...
</ul>
我得到的最接近的是通过创建这样的东西：
<ul class="nav">
<li class="w-100">
<a href="#">
Item 1
</a>
</li>
...
</ul>
但我认为应该有更好的方法。
使用 Bootstrap 4 构建这样的侧边栏/目录的正确方法是什么？
推荐指数
解决办法
查看次数
如何在 Bootstrap 4 中定位轮播指示器
我试图通过给出.carousel-indicatorsa来移动滑块图像下的指标，bottom: -50px;但指标只是消失了。现在我猜这与overflow:hidden滑块的有关，但我无法弄清楚。
这是我的代码：
<div id="slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
<li data-target="#slider" data-slide-to="3"></li>
<li data-target="#slider" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="header.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="slider2.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="slider3.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="slider4.jpeg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="slider5.jpeg">
</div>
</div>
</div>
和 CSS 在这里：
#slider {
height: 350px; …推荐指数
解决办法
查看次数
Bootstrap单选按钮不起作用
我在Bootstrap 4中使用单选按钮,如下所示:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" id="physical-option" onclick="alert('Physical!')" checked="checked" /> Physical
</label>
<label class="btn btn-primary">
<input type="radio" id="scenery-option" onclick="alert('Scenery!')" /> Scenery
</label>
</div>
你可以看到我在那里有onclicks.但是,当我点击它们时,没有任何反应!这是Bootstrap中的错误吗？
推荐指数
解决办法
查看次数
在某些屏幕尺寸下将.btn-group拆分到另一条线上
我正在玩Bootstrap 4(alpha 6),我喜欢到目前为止看到的内容.我遇到的一个问题是如何btn-group使用复选框/无线电进入,一旦它对于页面太宽就会移动到第二行.举个例子:
http://codepen.io/youradds/pen/KaBJEm
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" />
Piscine
</label>
<label class="btn btn-secondary">
<input type="checkbox" name="foo" class="checkbox" value="1" autocomplete="off" />
Piscine
</label>
.... loads of other buttons too
</div>
根据此文档:
http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons
如果你在宽度上缩小CodePen,你会看到我的意思.我想要发生的是它移动到第二行(而不是强制页面宽度来容纳它).
这甚至可能吗？
推荐指数
解决办法
查看次数
使用Bootstrap 4的行内有多行
我正在尝试使用Bootstrap创建一个全宽度的页面.我有类似这样的设置:
<body>
<div class="container-fluid">
<div class="row">
The first row goes here
</div>
<div class="row">
The second row goes here
</div>
<div class="row">
The third row goes here
</div>
</div>
</body>
如果我想在一行中创建一行,我该怎么做？这就是我想要实现的目标:
<body>
<div class="container-fluid">
<div class="row">
<div class="row text-center">
<h1>Some title</h1>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
Grid perhaps
</div>
<div class="col-md-4">
More grid
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</body>
所以基本上我想把标题放在一行,把一些网格放在另一行.这里棘手的部分是,我想在中间放置一些4列宽的列,然后在左侧和右侧放置"2列填充".
我的问题可能听起来像其他人,但由于填充,它是独一无二的.如何正确地进行此布局？
推荐指数
解决办法
查看次数
使用bootstrap 4对3列进行排序和堆叠
我在bootstrap列中有这个结构:
我希望您更改为更低的分辨率,请按以下顺序排序:
我在这里找到了如何使用flexbox: Flexbox:重新排序和堆叠列
但我不能将我的项目的整个结构更改为flexbox,所以我想知道如果使用bootstrap 4,则可以这样做.
非常感谢你.
我考试不好.
@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );
div {
text-align: center;
height: 60px;
}
#left {
background: yellow;
}
#middle {
background: blue;
}
#right {
background: coral;
}<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3">
<div id="left">COLUMN 1</div>
</div>
<div class="col-sm-6 col-md-6">
<div id="middle">COLUMN 2</div>
</div>
<div class="col-sm-3 col-md-3">
<div id="right">COLUMN 3</div>
</div>
</div>
</div>css flexbox twitter-bootstrap twitter-bootstrap-4 bootstrap-4
推荐指数
解决办法
查看次数