bootstrap居中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap居中相关的知识，希望对你有一定的参考价值。
怎么使这些内容在网页正中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="view/css/bootstrap.min.css">
<title>无标题文档</title>
</head>
<body>
<form class="form-horizontal">
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">用户名</label>
<div class="col-xs-2">
<input type="text" class="form-control" id="inputName" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">密码</label>
<div class="col-xs-2">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
<button type="reset" class="btn btn-default">重置</button>
</div>
</div>
</form>
</body>
</html>
不是12列栅格嘛，分3列布局，左中右各4列（自己适当调整）， 你这些内容放中间区域即可。 参考技术B 对于BOOTSTARP来说,让其处于中心的泳道即可.
居中导航栏 Bootstrap 4 [重复]
【中文标题】居中导航栏 Bootstrap 4 [重复]【英文标题】：Centering Navbar Bootstrap 4 [duplicate] 【发布时间】：2019-05-25 09:14:31 【问题描述】：我希望将“Cover”Bootstrap 4 模板中的导航栏居中。 当前代码如下。
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>
Preview
网站链接 - https://wojakbot-64140.firebaseapp.com/
【问题讨论】：
【参考方案1】：将mr-auto, ml-auto 添加到.masthead
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto mr-auto ml-auto">
<div class="inner">
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>
</div>【讨论】：
完美运行！谢谢【参考方案2】：删除.nav-masthead的浮动
.nav-masthead
/*float: right;*/
或删除HTML 上的class
<header class="masthead mb-auto">
<div class="inner">
<nav class="nav justify-content-center"> <!-- remove class "nav-masthead" -->
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>
【讨论】：
谢谢！它工作得很好，出于某种原因，我必须在更新之前清除我的缓存。我之前尝试过删除浮动，所以我尝试清除缓存并且成功了！以上是关于bootstrap居中的主要内容，如果未能解决你的问题，请参考以下文章