标签: twitter-bootstrap-4
使用 BS4 类更改按钮组方向垂直/水平
如何使用 bootstrap4 ONLY 类更改 btn-group 的方向垂直/水平，我找不到任何 btn-group-vertical-xs 、 -md、-lg 类。
<div class="btn-group-vertical">
...
</div>
5
推荐指数
推荐指数
1
解决办法
解决办法
2703
查看次数
查看次数
如何将 Bootstrap 卡图像居中
如何在 Bootstrap 4 卡中将图像居中？这是一个垂直图像，左对齐看起来不对。我一直在阅读 Bootstrap Card 文档，但找不到任何有关使图像居中的内容。
<div class="card-deck">
<div class="card col-sm-3">
<div>
<img class="card-img-top" src="image_URL" alt="alt-text" >
<div class="card-block">
<div class="card-text">
text
</div>
</div>
</div>
</div>
5
推荐指数
推荐指数
0
解决办法
解决办法
1万
查看次数
查看次数
在 Bootstrap 4 中显示单选按钮组的无效反馈文本
我正在尝试设置一个 Bootstrap 4 表单，该表单将根据Bootstrap 4 表单页面的自定义样式部分显示错误文本。我逐字使用了他们自己的表单的一部分，然后添加了一个单选组，但是当您尝试提交表单时，不会显示单选组的错误文本（“请选择一个选项。”）。
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
var form = document.getElementById('needs-validation');
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" 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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<form class="container" id="needs-validation" novalidate>
<div class="row">
<div class="custom-controls-stacked d-block my-3">
<label class="custom-control custom-radio">
<input …5
推荐指数
推荐指数
2
解决办法
解决办法
1万
查看次数
查看次数
在flexbox中将项目对齐到右侧
我正在使用Bootstrap 4和这个CSS类垂直对齐我的项目:
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center;
justify-content: flex-start;
}
有了这个,所有这些内容都与左边对齐.例如,如何将列表(ul> li)对齐到右边？我没有尝试过任何工作.
这是一个有效的演示:
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center;
justify-content: flex-start;
}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row vertical-align">
<div class="col-md-3" style="background-color: #f1f1f1;">
<div class="logo">
<img src="http://placehold.it/120x50" alt="" class="img-responsive">
</div>
</div>
<div class="col-md-6" style="background-color: #ffccff;">
<div class="catergorias">
<ul class="list-inline categorias_topo"> …4
推荐指数
推荐指数
1
解决办法
解决办法
755
查看次数
查看次数
如何使用sass在Bootstrap 4中创建一组新的颜色样式
我开始浏览精彩的Bootstrap 4，并且想知道如何为_custom.scss添加全新的元素颜色集
示例：现在您有btn-danger，text-danger等...如何使用随机名称创建示例：“ crisp”设置...因此您将拥有btn-crisp，text-crisp等...
我的猜测是从添加变量开始
$brand-crisp: #color !default;
但是，那又怎样呢？谢谢！我感谢您的帮助。
4
推荐指数
推荐指数
2
解决办法
解决办法
3214
查看次数
查看次数
Bootstrap 4 Alpha 6导航选项卡右对齐项目
我正在尝试创建一个标签菜单，该标签菜单位于菜单nav-item dropdown的最右边。
Bootstrap 4 alpha 5，float-xs-right及其工作原理：http：//codeply.com/go/FCFPpRqhZd
Bootstrap 4 alpha 6，我更改为float-right但无法正常工作：http：//codeply.com/go/5mddDUv1M6
有想法吗
4
推荐指数
推荐指数
1
解决办法
解决办法
4165
查看次数
查看次数
Bootstrap 4选项卡没有切换
我目前正在使用bootstrap 4.我阅读了bootstrap文档,我目前正在尝试合并标签,但他们没有切换我的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Info</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0- alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
</head>
<body>
<?php include_once("template_pageTop.php"); ?>
<div class="container p-t-md">
<div class="row">
<div class="col-md-6">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#currentPreferences">Current Preferences</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#alternative"> Alternative </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="currentPreferences">
<ul class="list-group media-list media-list-stream">
<?php
display();
?>
</ul>
</div>
<div role="tabpanel" class="tab-pane fade in" id="alternative">
<ul class="list-group media-list …javascript twitter-bootstrap twitter-bootstrap-4 bootstrap-4
4
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
Bootstrap 4导航栏高度Sass变量丢失了吗？
我搜索了Bootstrap 4的sass文件，缺少$ navbar-height。更改Bootstrap 4中导航栏高度的sass变量是什么？
4
推荐指数
推荐指数
2
解决办法
解决办法
1796
查看次数
查看次数
使用Bootstrap 4垂直对齐嵌套行
使用Bootstrap 4,我在尝试分别使用align-items-start和时align-items-end,垂直对齐嵌套行时遇到问题.
这是我目前的代码:
<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="container-fluid">
<div class="row justify-content-around">
<div class="col-sm-2 align-self-center"> <!-- Left side col -->
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
</div>
<div class="col-sm-8"> <!-- Right side col -->
<div class="row align-items-start" style="background-color:gray;"> <!-- Upper right row -->
<div class="col">
<p>Right col, upper left</p>
</div>
<div class="col">
<p>Right col, upper right</p>
</div>
</div>
<div class="row …4
推荐指数
推荐指数
1
解决办法
解决办法
1162
查看次数
查看次数
将文本与Bootstrap 4对齐
我当前正在使用引导程序4。我试图在卡头上对齐文本，我尝试使用，ml-auto但是它不起作用。有什么解决方案？
这是我的卡头代码：
<div class="card-header bg-info text-white">
<a href="#" class="text-white"><i class="fa-th"></i> Media Library</a>
<a href="#" class="text-white ml-auto">Add Media</a>
</div>
4
推荐指数
推荐指数
2
解决办法
解决办法
2万
查看次数
查看次数