小编Ret*_*ros的帖子
Bootstrap 4:内部导航的多级下拉
在Bootstrap 4中进行多级下拉列表的最简单方法是什么？我设法在SO上找到的所有例子都太乱了或者没有包含在导航中.
我试过在下拉列表中放置一个下拉列表,但这似乎并没有起作用.有人可以帮我这个吗？
这是我的代码的基本大纲:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<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>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<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="#">Link 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" …46
推荐指数
推荐指数
6
解决办法
解决办法
11万
查看次数
查看次数
使用图标Bootstrap 4搜索输入
不知道我怎么能这样做,因为BS 4不支持glyphicons.我是将其设置为背景还是将不同的定位应用于字体真棒图标？
到目前为止这是我的代码:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="form-group col-md-4">
<input class="form-control rounded-0 py-2" type="search" value="search" id="example-search-input">
</div>
<!-- /.form-group -->我想使用这个字体很棒的图标.我也尝试过添加它background-image,如:
.form-control {
background-image: url('https://res.cloudinary.com/dt9b7pad3/image/upload/v1502810110/angle-down-dark_dkyopo.png');
background-position: right center 5px;
}
但这没有任何作用.我能想到的唯一方法是添加font-awesome图标,然后将定位设置为绝对,对吧？但我不确定这是否是"干净"和正确的方法呢？我需要采取不同的方法吗？有人帮忙!谢谢!
24
推荐指数
推荐指数
1
解决办法
解决办法
8万
查看次数
查看次数
Chart.js - 造型图例
我正在用chart.js创建一个图表,我试图找出如何更改标签/图例样式.我想删除矩形部分,而是使用圆圈.我已经读过你可以制作你的自定义图例(使用legendCallback),但对于我的生活,我无法弄清楚如何做到这一点.这就是我的图表现在的样子 - 图像.
这是我的HTML:
<div class="container">
<canvas id="myChart"></canvas>
</div>
这是我的JS:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Link One',
data: [1, 2, 3, 2, 1, 1.5, 1],
backgroundColor: [
'#D3E4F3'
],
borderColor: [
'#D3E4F3',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
legend: …15
推荐指数
推荐指数
4
解决办法
解决办法
2万
查看次数
查看次数
更改Bootstrap 4上的下拉图标
在Bootstrap 3上,这非常简单,你只需要改变跨度并添加你想要的任何图标.但Bootstrap 4的情况似乎并非如此.或者我可能错过了一些东西？
无论如何,这是它的基本代码:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
有人可以告诉我是否可以更改此下拉图标以及如何更改？我想从fontawesome中添加一个.
谢谢!
13
推荐指数
推荐指数
3
解决办法
解决办法
3万
查看次数
查看次数
Bootstrap 4:按钮将文本与图标对齐
所以我正在制作一个左侧带有图标的按钮.对齐搞砸了.我的文字中间没有与图标对齐,我不知道如何解决这个问题.线高似乎没有做任何事情.或者触摸填充/边距因为我已经将填充添加到图标区域,因为我需要它比文本背景更暗.
这是图像预览:
有没有办法可以修复对齐方式？或者有没有办法使用Bootstrap 4更容易地使用这种类型的按钮？
这是我的代码:
.btn-primary {
background-color: #3382c7;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
span {
padding-left: 25px;
padding-right: 25px;
}
i {
font-size: 20px;
background-color: #306fa5;
padding: 15px 20px;
}
}<a href="#" class="btn btn-primary border-0 rounded-0 p-0">
<i class="fa fa-play" aria-hidden="true"></i>
<span>Click here to Play</span>
</a>8
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
如何在Navbar中创建Bootstrap 4全宽下拉列表？
我正在尝试制作一个看起来像折叠项目的全宽下拉列表 - 网站现在经常使用的全宽可折叠导航.但我无法弄清楚该怎么做.
我试过添加Bootstrap的崩溃插件,但是没有用.将多个.navbar-collapse类添加到导航栏是否安全？
或者我的方法应该只是编辑Bootstrap的下拉列表？如果是这样,我该怎么做？
这是一张图片,向您展示我正在努力实现的目标:
这是我的代码的大纲,请查看剪裁的全宽:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#" style="color: red;">LOGO GOES HERE</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">
<ul class="navbar-nav">
<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">
Dropdown
</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> …7
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
Bootstrap 4:通过推送内容停止崩溃
我正在使用Bootstrap 4 Collapse并且它工作正常,我只想更改一件事,如果可能的话.有没有办法阻止它推下它下面的内容,而是重新审视它？这有可能实现吗？如何？
这是它的基本HTML:
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
<div>Content goes here</div>
谢谢!
5
推荐指数
推荐指数
1
解决办法
解决办法
8906
查看次数
查看次数
在Bootstrap 4中居中三个col-md-3列
有没有办法有三个col-md-3列并将它们居中.偏移不起作用,因为我必须偏移一列半的第一列.那还有另一种方法吗？
这是代码的大纲:
.col-md-3 {
background-color: #e2e2e2;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-3">First column</div>
<div class="col-md-3">Second column</div>
<div class="col-md-3">Third column</div>
</div>
</div>我在SO上找到的答案都与Bootstrap 3及更低版本有关.并没有使用Bootstrap 4.有人可以看一看让我知道吗？
5
推荐指数
推荐指数
1
解决办法
解决办法
3525
查看次数
查看次数
如何改变Bootstrap 4工具提示不透明度？
我需要针对什么来改变Bootstrap 4的不透明度？我发现我需要将其定位以影响其背景,但是当我向工具提示内部或工具提示添加不透明度:1时,它什么都不做:
.tooltip .tooltip-inner {
background-color: #014379;
}
.tooltip .arrow:before {
border-top-color: #014379;
}
我需要做些什么来改变它？谢谢!
4
推荐指数
推荐指数
1
解决办法
解决办法
1915
查看次数
查看次数
没有标签的“for”属性的自定义复选框（Bootstrap 4）
有没有办法在不使用输入上的 和标签上的id属性的情况下仍然拥有 Bootstrap 4 自定义复选框样式？for当您删除它时，检查的样式不存在。
例子：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
<label class="custom-control-label">Check this custom checkbox</label>
</div>我尝试用标签包装输入，但这似乎也没有做任何事情。有没有一种方法可以避免给输入提供静态 id 并且仍然获得 Boostrap 样式的复选框？谢谢！
3
推荐指数
推荐指数
1
解决办法
解决办法
3284
查看次数
查看次数