html - 如何在 bootstrap4 中居中标签?
问题描述
我想login/Signup
在页面中间显示我的选项卡及其相关表单,并且还想要小的文本文件col-md-12
,col-md-4
但是当我使用表单时style="margin-left=200px;"
,表单将在中间,但在移动模式下它没有显示,所以我删除了style="margin-left=200px;"
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
<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://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<br>
<h4 class="text-center">User Panel</h4>
<hr>
<!-- Nav tabs -->
<ul class="nav nav-tabs form-signin" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">SignUp</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<form class="form-signin">
<img class="mb-4" src="https://camu.in/assets/img/avatar1.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<p>Signup</p>
<form class="form-signin">
<img class="mb-4" src="https://camu.in/assets/img/avatar1.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
</div>
</div>
</div>
我想在页面中间输出下面的选项卡和表单,但我做不到。请检查下面的图片我想要什么。此外,当我点击SignUp
一切都搞砸了。
解决方案
nav-tabs
通过添加 class-name将 ul 与 class-name 居中justify-content-center
。此外,通过将类名添加pb-0
到nav-tabs
.
所以,它<ul class="nav nav-tabs form-signin justify-content-center pb-0" role="tablist">
不是<ul class="nav nav-tabs form-signin" role="tablist">
.
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
<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://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<h4 class="text-center">User Panel</h4>
<!-- Nav tabs -->
<ul class="nav nav-tabs form-signin justify-content-center pb-0" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">SignUp</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<form class="form-signin">
<img class="mb-4" src="https://camu.in/assets/img/avatar1.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<form class="form-signin">
<img class="mb-4" src="https://camu.in/assets/img/avatar1.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign up</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
</div>
</div>
</div>
推荐阅读
- c# - 如何按属性分组并从任何使用 lambda linq 的组中获取第一条记录?
- gatsby - 限制 gatsby-plugin-feed 中的项目数量
- python - 加入 pandas 系列字符串
- android - 获取语言环境阅读方向(Android)
- android - URL HTML解析器在android中的速度如此之慢
- datagrid - React-Admin - 如何在 React-Admin 中创建没有列表的 Datagrid
- office-js - 如何从 Office.js API 更改自动更正表格选项?
- java - 使用 Maven Surefire 保留 JUnit XML 报告结构
- android - 获取 isConnected 失败:Kotlin Retrofit 发布请求的 ECONNREFUSED(连接被拒绝)错误
- ms-access - 如何根据限制字段计算与描述匹配的记录