个人中心
gpt4 book ai didi

css - 在 Bootstrap 中均匀分布表单元素

转载 作者：行者123 更新时间：2023-11-28 11:59:03 25 4
gpt4 key购买 nike

我有以下 todolist 网络应用程序，我试图将两个输入和按钮间隔均匀。但是我无法通过检查表单中的元素来弄清楚哪些元素具有将按钮进一步向下推的边距或填充。该表单具有三个元素，两个输入和一个按钮。我想要三个均匀分布。如果您能让我知道如何解决此问题，我们将不胜感激。

网络应用链接: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>

最佳答案

在您的类(class) .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>

关于css - 在 Bootstrap 中均匀分布表单元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48424976/

25 4 0
文章推荐： android - 移动安卓设备的CSS : white border above background-image doesn't want to dissapear
文章推荐： css - 根据其他规则应用 CSS 规则 - RTL 特定样式
文章推荐： css - Sass 将映射传递给函数不是有效的 CSS 值
文章推荐： css - stylelint 规则黑名单特定选择器
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com