Bootstrap中表单元素的均匀间距
Bootstrap中表单元素的均匀间距
提问于 2018-01-24 22:34:54
我有以下的todolist web应用程序，我正在尝试均匀地间隔两个输入和按钮。但是，通过检查表单中的元素，我无法确定哪个元素具有将按钮进一步向下推的页边距或填充。该表单有三个元素、两个输入和一个按钮。我要这三个均匀分布。如果你能让我知道如何解决这个问题。
webapp链接：http://pctechtips.org/apps/todo/
代码：
body {
margin: 0 auto;
height: 100vh;
color: white;
/*display: flex;*/
background: linear-gradient(to bottom right, #6a176a, #7c811b) 100% no-repeat;
}
.navbar-brand {
color: white;
}
.add-item {
font-size: 2em;
margin: 0 auto;
border-radius: 30px;
}
.list-group {
color: gray;
font-size: 18px;
}<title>TodoList App</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-drak bg-dark mb-4">
<a class="navbar-brand" href="#"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Todo<strong>List</strong></a>
</nav>
<!-- /navbar -->
<!-- todoList -->
<div class="container">
<div class=" add-item text-white text-center border col-sm-12 col-md-10 col-lg-8 mb-4">
<a class="new-todo text-white text-center" href=""><i class="fa fa-plus-circle" aria-hidden="true"></i> Enter new todo item</a>
<div class="add-item text-center col-sm-12 col-md-12 col-lg-8">
<form class="mb-4">
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Todo Title">
</div>
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Todo Description">
</div>
<button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</form>
</div>
<!-- horizontal line -->
<hr>
<!-- list items -->
<h1 class="heading-4">Todo List Items</h1>
<ul class="list-group mt-4 pb-4">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
</div>
回答 3
Stack Overflow用户
发布于 2018-01-24 22:50:36
在您的.add-item类中，您正在以EM为单位应用font-size，我认为这就是问题所在。当指定EM时，计算字体大小的方式可能会导致不一致的“堆叠”问题，即字体大小的增加或减少远远超出预期。
删除此声明或将其从2em更改为2rem可解决此问题。
body {
margin: 0 auto;
height: 100vh;
color: white;
/*display: flex;*/
background: linear-gradient(to bottom right, #6a176a, #7c811b) 100% no-repeat;
}
.navbar-brand {
color: white;
}
.add-item {
font-size: 2rem;
margin: 0 auto;
border-radius: 30px;
}
.list-group {
color: gray;
font-size: 18px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class=" add-item text-white text-center border col-sm-12 col-md-10 col-lg-8 mb-4">
<a class="new-todo text-white text-center" href=""><i class="fa fa-plus-circle" aria-hidden="true"></i> Enter new todo item</a>
<div class="add-item text-center col-sm-12 col-md-12 col-lg-8">
<form class="mb-4">
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Todo Title">
</div>
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Todo Description">
</div>
<button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</form>
</div>
</div>
</div>
Stack Overflow用户
发布于 2018-01-24 22:50:36
似乎.add-item类操作按钮。
你可以试试
css：
.test {
font-size: 1rem;
}
.test button {
font-size: 1em;
}Html (对内容进行换行)：
<div class="test">
<button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</div>Stack Overflow用户
发布于 2018-01-24 22:45:29
这是因为form.mb-4有一个计算的line-height:96px。将其重置为1.5rem可以解决此问题：
body {
margin: 0 auto;
height: 100vh;
color: white;
/*display: flex;*/
background: linear-gradient(to bottom right, #6a176a, #7c811b) 100% no-repeat;
}
.navbar-brand {
color: white;
}
.add-item {
font-size: 2em;
margin: 0 auto;
border-radius: 30px;
}
.list-group {
color: gray;
font-size: 18px;
}
form.mb-4 {
line-height: 1.5rem;
}<title>TodoList App</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-drak bg-dark mb-4">
<a class="navbar-brand" href="#"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Todo<strong>List</strong></a>
</nav>
<!-- /navbar -->
<!-- todoList -->
<div class="container">
<div class=" add-item text-white text-center border col-sm-12 col-md-10 col-lg-8 mb-4">
<a class="new-todo text-white text-center" href=""><i class="fa fa-plus-circle" aria-hidden="true"></i> Enter new todo item</a>
<div class="add-item text-center col-sm-12 col-md-12 col-lg-8">
<form class="mb-4">
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Todo Title">
</div>
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Todo Description">
</div>
<button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</form>
</div>
<!-- horizontal line -->
<hr>
<!-- list items -->
<h1 class="heading-4">Todo List Items</h1>
<ul class="list-group mt-4 pb-4">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48424976
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号