为什么输出右侧有一个空格？如何使用引导程序 4 填充空格？答案

【问题标题】：why there is a space left at right side of output?How can i fill the space using bootstrap 4?为什么输出右侧有一个空格？如何使用引导程序 4 填充空格？
【发布时间】：2021-04-22 23:31:29
【问题描述】：

why there is a space at the end of the output? How can i fill the space using bootstrap 4?

.navbar-custom {
     background-color:rgb(128 128 128 / 18%);
     height:48px;
}
 .close{
     margin-bottom: 40px;
}
 h2{
     margin-top: 35px;
     margin-left: 34px;
}
/* .logo1{
     margin-bottom: 120px;
}
 */
 .container-fluid {
     max-width: 100%;
     padding-right:0;
     padding-left:0;
     margin-right:0;
     margin-left:0 
}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
    <div class="container-fluid">
        <nav class="navbar navbar-custom">
            <!-- Brand/logo -->
            <a class="navbar-brand" href="#">
                <div class="mt-0 ">
                    <img src="logo.png" class="logo1" alt="logo" style="width:50px;"></div>
            </a>
            <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

        </nav>
    </div>
    <h2>Do you have Fever above 101.4?</h2>
    <div class="mx-auto mt-5" style="width:150px">
        <img src="fever.png" class="logo1" alt="logo" style="width:200px;">
    </div>
    <br>
    <div class="row row-cols-1">
        <div class="col"><button type="button" class="btn btn-primary btn-block mt-5">Yes,I do</button></div>
        <div class="col"> <button type="button" class="btn btn-primary btn-block mt-2">No, I don't</button></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

如何使用 bootstrap 4 填充空间？我正在处理这个项目并遇到了一个问题，即项目没有完全填充右侧的空间，而不是使用 container-fluid。

【问题讨论】：

你能添加你的head 和你的JavaScript（如果有的话）吗？如果我复制您发送的 HTML 并添加 JQuery 和 Bootstrap，按钮会一直到我的屏幕边缘。导航栏一直到container-fluid 的边缘，如果你想让它一直到屏幕边缘，你需要把它带到容器外面。例如，在引导站点中，他们使用header 标记。

标签： html css bootstrap-4 containers navbar

【解决方案1】：

margin-right:-15px 和 margin-left:-15px 在您的行类中导致它。将它们设置为零。

.no-margin
{
  margin-right:0 !important;
  margin-left:0 !important;
}

并在您的 html 中添加无边距；

 <div class="row row-cols-1 no-margin">
    ........
 </div>

【讨论】：

【解决方案2】：

因为默认的row引导风格会设置margin-left: -15px和margin-right: -15px所以会溢出容器并显示水平滚动条

如果您要使用引导程序 row，请确保它位于 container 或 container-fluid 类中，这样样式才能正常工作

记住引导程序使用网格/列，您需要确保结构是container 然后是子row 然后是子col

通过移动 container-fluid 类中的内容更新了 sn-p

.navbar-custom {
  background-color: rgb(128 128 128 / 18%);
  height: 48px;
}

.close {
  margin-bottom: 40px;
}

h2 {
  margin-top: 35px;
  margin-left: 34px;
}


/* .logo1{
     margin-bottom: 120px;
}
 */

.container-fluid {
  max-width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
  <div class="container-fluid">
    <nav class="navbar navbar-custom">
      <!-- Brand/logo -->
      <a class="navbar-brand" href="#">
        <div class="mt-0 ">
          <img src="logo.png" class="logo1" alt="logo" style="width:50px;"></div>
      </a>
      <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

    </nav>
    <h2>Do you have Fever above 101.4?</h2>
    <div class="mx-auto mt-5" style="width:150px">
      <img src="fever.png" class="logo1" alt="logo" style="width:200px;">
    </div>
    <div class="row row-cols-1">
      <div class="col"><button type="button" class="btn btn-primary btn-block mt-5">Yes,I do</button></div>
      <div class="col"> <button type="button" class="btn btn-primary btn-block mt-2">No, I don't</button></div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>

【讨论】：