标签: 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 3迁移到Bootstrap 4？
我在我的项目中使用bootstrap 3.我看到Bootstrap 4是几乎整个Bootstrap项目的重大改写.但有没有必要从3迁移到bootstrap 4？
html css twitter-bootstrap twitter-bootstrap-3 twitter-bootstrap-4
推荐指数
解决办法
查看次数
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
先感谢您.
推荐指数
解决办法
查看次数
仅文字旋转木马
我没有一个只有文字而没有任何img的旋转木马.文本似乎与控件发生冲突.我发现的每个例子都使用了<img>.我试过使用d-flexclass,block甚至是carousel-caption.到目前为止,没有任何工作.
<div id="carouselContent" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<p>lorem ipsum (imagine longer text)</p>
</div>
<div class="carousel-item">
<p>lorem ipsum (imagine longer text)</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselContent" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselContent" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
推荐指数
解决办法
查看次数
Bootstrap 4:如何在容器中使用带有内容的全宽导航栏(如SO导航栏)？
我正在使用Bootstrap 4.
如何制作像SO导航栏一样的导航栏？
内容如同"容器"对齐,但在引导程序4中的"容器 - 流体"的宽度？
我想要"固定顶部"导航栏设置的宽度,而不是固定顶部和导航栏内容在"容器"中.
我想提供一个例子,但我想尝试制作与本页顶部的导航栏完全相同的东西.
css responsive-design twitter-bootstrap twitter-bootstrap-4 bootstrap-4
推荐指数
解决办法
查看次数
在Bootstrap 4中更改按钮的背景颜色
我想改变Bootstrap 4 Alpha 6中按钮的颜色.
在我的_custom.scss中,我包括:
$brand-primary: $purple;
但要使按钮从蓝色变为紫色,我还必须包括:
$btn-primary-bg: $purple;
不应该包括第一行吗？
这就是我在自定义文件中的全部内容.
$purple: #a02971;
$brand-primary: $purple;
$enable-rounded: false;
最后一行成功删除了我的按钮的圆角,所以我知道我对sass文件的重新编译工作正常.但是当我查看生成的css时,按钮背景颜色仍然是默认的蓝色.
推荐指数
解决办法
查看次数
如果你的内容要跨越整个宽度,你需要使用Bootstrap的"容器"和"行"吗？
我认为Bootstrap 3和4的标准是
<div class="container">
<div class="row">
<div class="col-md-4"> ... </div>
<div class="col-md-8"> ... </div> <!-- just add up to 12 -->
</div>
</div>
但是,如果你有div,table,form,或任何元素,你打算就让它跨越整个宽度是多少？那么你需要container或者row或col-md-12可言,整个页面下引导3和4的样式规则显示效果出色？
PS如果可能的话,请指向或引用与此相关的官方Bootstrap文档.
twitter-bootstrap twitter-bootstrap-3 twitter-bootstrap-4 bootstrap-4
推荐指数
解决办法
查看次数
侧边栏的 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; …推荐指数
解决办法
查看次数
如何从button元素创建ng-bootstrap日期范围选择器弹出窗口
我正在尝试为daterangepicker添加功能,以允许根据所选的日期范围过滤项目列表.
我希望结合以下功能:
有一个显示"过滤"的按钮.没有输入.
用户可以单击该按钮,然后打开显示2个月的日历 - 当前和下一个.
然后,用户可以选择日期范围.
然后,所选日期范围将成为按钮的标签,向用户显示他或她选择的内容.
这个功能可以吗？当我尝试在按钮上添加日历时,它会完全中断.当我使用输入弹出日历时,它只允许我选择开始日期,然后关闭.
这就是我想要的:
<button #dp ngModel (click)="d.toggle()" (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t" ngbDatepicker #d="ngbDatepicker">
Click Me
</button>
<ng-template #t let-date="date" let-focused="focused">
<span class="custom-day"
[class.focused]="focused"
[class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
[class.faded]="isHovered(date) || isInside(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date.day }}
</ng-template>
谢谢
推荐指数
解决办法
查看次数