标签: twitter-bootstrap-4
`col-xs-*`在Bootstrap 4中不起作用
我之前没有遇到过这种情况,我很难找到解决方案.当引导程序中的列等于中等时,如下所示:
<h1 class="text-center">Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>vicki williams</h1>
</div>
</div>
</div>
text-align工作正常:
但是当使列等于超小时,如下所示:
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1>vicki williams</h1>
</div>
</div>
</div>
然后text-align不再有效:
是否有一些我不理解的引导概念,或者这实际上是一个像我认为的那样的错误.我从来没有遇到过这个问题,因为我的文本在过去与xs始终保持一致.任何帮助将不胜感激.这是我的完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
</head>
<body>
<h1 class="text-center">Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1>vicki williams</h1>
</div>
</div>
</div>
<!-- jQuery first, then Tether, …html css text-alignment twitter-bootstrap twitter-bootstrap-4
推荐指数
解决办法
查看次数
Bootstrap 4中的'.well'等价类是什么
在bootstrap-3中,有一个.well类,它在一个带有灰色背景颜色和一些填充的元素周围添加一个圆角边框.
<div class="well">Basic Well</div>
但是,我没有.well在bootstrap-4中找到任何类..well在bootstrap-4中是否有相同的标签？
css twitter-bootstrap twitter-bootstrap-3 twitter-bootstrap-4 bootstrap-4
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
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按钮的颜色？
推荐指数
解决办法
查看次数
如何删除Bootstrap 4中的下拉箭头？
我正在使用Bootstrap 4.我试图删除下拉列表中的箭头.
我找到的Bootstrap 3 的答案不再适用.
jsfiddle在这里.
<div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>
推荐指数
解决办法
查看次数
bootstrap 4响应实用程序可见/隐藏xs sm lg无法正常工作
迁移到Bootstrap 4时,新响应实用程序隐藏/可见类出现问题.我知道.hidden-类已从v3中删除并替换为.使用新类但元素不会更改为可见/隐藏.无法弄清楚为什么..hidden-*-up .hidden-*-down.hidden-*-up.hidden-*-down
<div class="col hidden-xs-down">
<span class="vcard">
…
</span>
</div>
<div class="col hidden-lg-down">
<div class="hidden-sm-down">
…
</div>
<div class="hidden-xs-down">
…
</div>
</div>
*无论屏幕大小如何,此示例中都不隐藏任何内容(Safari,响应式设计模式)
hidden hide twitter-bootstrap twitter-bootstrap-3 twitter-bootstrap-4
推荐指数
解决办法
查看次数
如何在点击时隐藏可折叠的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: …推荐指数
解决办法
查看次数
在Bootstrap 4中左右对齐模态页脚按钮
Bootstrap 4使用flex-box作为模态页脚.如果我想要两个按钮,一个在左边,一个在右边,我该如何让它正常工作？
下面的代码尝试使用div.rowwith col-sm-6但不起作用.
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-6 text-left">
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<div …推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
bootstrap 4是否有内置的水平分隔线？
bootstrap 4是否有内置的水平分隔线？我可以做这个,
<style type="text/css">
.h-divider{
margin-top:5px;
margin-bottom:5px;
height:1px;
width:100%;
border-top:1px solid gray;
}
</style>
但我想使用内置的bootstrap css,我无法在文档中的任何地方找到它,也许我错过了它.
推荐指数
解决办法
查看次数