标签: bootstrap-4
Bootstrap v4 datepicker
我正在使用Bootstrap V4为我的新网站看到它在Alpha中.
但是我看不到它的构建中有datepicker.js.
有谁知道这是否会包含在V4中？如果没有,任何人都可以推荐一个好日期选择器？
谢谢
98
推荐指数
推荐指数
3
解决办法
解决办法
29万
查看次数
查看次数
如何在ASP.NET Core中使用Bootstrap 4
我想用NuGet更新ASP.NET Core中的Bootstrap.我用过这个:
Install-Package bootstrap -Version 4.0.0
它确实添加了依赖项,但我现在如何将它添加到我的项目中？本地NuGet依赖的路径是什么？
96
推荐指数
推荐指数
6
解决办法
解决办法
8万
查看次数
查看次数
94
推荐指数
推荐指数
4
解决办法
解决办法
11万
查看次数
查看次数
如何在卡列中使Bootstrap 4卡的高度相同？
我正在使用Bootstrap 4 alpha 2并利用卡片.具体来说,我正在使用官方文档中的这个示例.正如标题所说,我怎样才能让所有牌都高度相同？
编辑:我现在可以想到的是设置以下CSS规则:
.card {
min-height: 200px;
}
但这只是一个硬编码的解决方案,在一般情况下不起作用.我视图中的代码与文档中的代码相同,即:
<div class="card-columns">
<div class="card">
<img class="card-img-top" data-src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small …90
推荐指数
推荐指数
9
解决办法
解决办法
17万
查看次数
查看次数
Bootstrap 4中的.pull-left和.pull-right类发生了什么变化？
在最新版本中,左拉和右拉已被替换为.pull- {xs,sm,md,lg,xl} - {left,right,none}
这意味着class="pull-right"我不会写一个简单的,而是现在要写class="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"
有一个不那么乏味的方法吗？
89
推荐指数
推荐指数
8
解决办法
解决办法
11万
查看次数
查看次数
Bootstrap 4更改汉堡包Toggler颜色
我有一个bootstrap网站,Hamburger当屏幕小于992px时添加.HamBurger代码是这样的
<button class="navbar-toggler navbar-toggler-right" 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>
有没有可能改变HamBurger按钮的颜色？
88
推荐指数
推荐指数
9
解决办法
解决办法
19万
查看次数
查看次数
Bootstrap 3和4.container-fluid与网格添加不需要的填充
我希望我的内容流畅,但在使用.container-fluidBootstrap的网格时,我仍然看到填充.我该如何摆脱填充？
我看到我没有得到.row的填充,但我想添加列,并且一旦我这样做,填充回来了:O.
我希望能够使用全宽的列.
一个例子:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-sm-6">
<p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
解决方案我有:
覆盖bootstrap.css,linke 1427和1428(v3.2.0)
padding-right: 15px;
padding-left: 15px;
至
padding-right: 0px;
padding-left: 0px;
85
推荐指数
推荐指数
6
解决办法
解决办法
13万
查看次数
查看次数
Bootstrap 4:下拉菜单将在屏幕右侧显示
我似乎无法让下拉项目离开页面.我尝试了BS3的一些东西,但它们似乎没有用.我不确定它是不是因为ml-auto.(忽略if-else语句)
下面是编码器
http://codepen.io/bbennett36/pen/oByzgw
<div class="container-fluid">
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse" style="background-color: #3c763d!important;">
<button class="navbar-toggler navbar-toggler-right navbar-toggler-custom" type="button" data-toggle="collapse" data-target="#searchNav" aria-controls="searchav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<button class="navbar-toggler navbar-toggler-right" 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>
<!-- <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button> -->
<div id="logo">
<a class="navbar-brand" href="/">Company</a>
</div>
<div class="collapse navbar-collapse" id="searchNav">
<ul class="navbar-nav mx-auto">
<form action="/search" class="form-inline">
<input class="form-control mr-sm-2" id="keyword" name="keyword" :value='keyword' type="text" placeholder="Search for jobs" …82
推荐指数
推荐指数
4
解决办法
解决办法
6万
查看次数
查看次数
Bootstrap 4响应表不会占用100%的宽度
我正在使用Bootstrap 4构建一个Web应用程序并遇到一些奇怪的问题.我想利用Bootstrap的表响应类来允许在移动设备上水平滚动表.在桌面设备上,表格应占据包含DIV宽度的100%.
一旦我将.table-responsive类应用到我的表中,表就会水平缩小,不再占用宽度的100%.有任何想法吗？
这是我的标记:
<!DOCTYPE html>
<html lang="en" class="mdl-js">
<head>
<title></title>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="application-name" content="">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="/css/bundle.min.css">
</head>
<body>
<div class="container-fluid no-padding">
<div class="row">
<div class="col-md-12">
<table class="table table-responsive" id="Queue">
<thead>
<tr>
<th><span span="sr-only">Priority</span></th>
<th>Origin</th>
<th>Destination</th>
<th>Mode</th>
<th>Date</th>
<th><span span="sr-only">Action</span></th>
</tr>
</thead>
<tbody>
<tr class="trip-container" id="row-6681470c-91ce-eb96-c9be-8e89ca941e9d" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d">
<td>0</td>
<td>PHOENIX, AZ</td>
<td>SAN DIEGO, CA</td>
<td>DRIVING</td>
<td><time datetime="2017-01-15T13:59">2017-01-15 13:59:00</time></td>
<td><span class="trip-status-toggle fa fa-stop" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d" data-trip-status="1"></span></td>
</tr>
<tr class="steps-container" data-steps-for="6681470c-91ce-eb96-c9be-8e89ca941e9d" …79
推荐指数
推荐指数
6
解决办法
解决办法
7万
查看次数
查看次数
如何在点击时隐藏可折叠的Bootstrap 4导航栏
我使用Bootstrap 4创建了这个可折叠的导航栏,效果很好,但我想在用户点击链接时关闭它.有什么办法吗？谢谢
html导航栏:
<nav class="navbar navbar-toggleable-md fixed-top">
<button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="container">
<a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a>
<div class="collapse navbar-collapse" id="navbarDiv">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-us">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
css for .icon-bar,因为Bootstrap 4不使用icon-bar类.
.navbar-toggler .icon-bar {
margin: 7px;
display: block;
width: 22px;
height: 1px;
background-color: #cccccc;
border-radius: …78
推荐指数
推荐指数
5
解决办法
解决办法
8万
查看次数
查看次数