愿所有的美好和期待都能如约而至

Bootstrap 5是否删除了行之间的间距?

发布时间:  来源:互联网  作者:匿名  标签:bootstrap-5 css error Did bootstrap 5 remove spacing between row? exception IT资讯  热度:37.5℃

本文介绍了Bootstrap 5是否删除了行之间的间距?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我开始使用bootstrap 5,注意到行之间没有空格。我们是否必须显式使用spacing实用程序(如mb-3mb-2等)来尝试了解删除行之间垂直空格的原因。

数据-lang=”js”数据-隐藏=”假”数据-控制台=”真”数据-巴贝尔=”假”>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>  
  <div class="row">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

推荐答案

引导数据库5具有vertical gutters for the Grid。不使用单独的行,而是将列放在单个rowdiv中。然后在行上使用您想要的gy-*

  <form>
        <div class="row gy-4">
            <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="inputEmail3">
            </div>
            <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword3">
            </div>
            <div class="col-sm-10 offset-sm-2">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="gridCheck1">
                    <label class="form-check-label" for="gridCheck1"> Example checkbox </label>
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Sign in</button>
  </form>

https://codeply.com/p/4ZM75xw90B

这篇关于Bootstrap 5是否删除了行之间的间距?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP