问题：

使用无填充时如何删除水平滚动条

冯敏达

2023-03-14

我有一个问题：我想创建一个布局，但当我移除下面代码行处的填充(p-0)时，一个水平滚动条就出现了。是否有机会我可以删除填充和没有滚动条出现？我不知道该怎么办，也许你们能帮我。问题是我想让col保持完整的长度而不加填充，但是当我移除填充时，水平滚动条就会出现。

...

<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">    
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
...

null

<!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">
  <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>
</head>
<body>
<div>
      <div class="row m-auto">
        <div class="col-md-12 p-0">
            <div>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="#">
                    Navbar w/ text
          </a>
                <button
                    class="navbar-toggler"
                    type="button"
                    data-toggle="collapse"
                    data-target="#navbarText"
                    aria-controls="navbarText"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                >
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarText">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">
                                Home <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                Features
                </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                Pricing
                </a>
                        </li>
                    </ul>
                    <span class="navbar-text">Navbar text with an inline element</span>
                </div>
            </nav>
        </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-4">
                        <div>
                  <div class="row m-1">
                    <div class="col-md-11">
                      Chats
                  </div>
                    <div class="col-md-1">
                      <i class="fas fa-plus-circle"></i>
                    </div>
                  </div>
                  <div class="row mb-2">
                    <div class="col-md-12">
                      <form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}>
                        <input class="form-control  mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search" />
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
                      </form>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="list-group">
                        <div>
            <a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style={{marginTop: "7.5px", marginBottom: "7.5px"}}>
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">List group item heading</h5>
                    <small>3 days ago</small>
                </div>
                <div class="row">
                    <div class="col-md-11">Donec id elit non mi porta...
                    </div>
                    <div class="col-md-1">
                        <span class="badge badge-primary badge-pill text-right">5</span>
                    </div>
                </div>
            </a>
        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-8 ">
                  <div>
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">

                    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
                        <div class="row">
                        <!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
                            <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                                <img src="..." class="image-head-chat" alt="Responsive image" />
                            </div>

                            <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                Text
                            </div>

                            <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
                                Icons
                            </div>

                        </div>
                    </div>


                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                            Nachrichten
            </div>
                    </div>

                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                            Eingabe
              <div class="row">
                                Form
              </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

</body>
</html>

null

共有1个答案

单耘豪

2023-03-14

可能您的网格实现不正确。避免为引导类添加附加样式，并在需要时使用.行。当您需要自定义样式时，请在.container、.row和.col中使用包装器，这样您就可以在不更改引导行为的情况下管理它们。

在您的情况下，我将从p0的父div中删除类row，然后从p0中删除类col-MD-12，将p0width设置为100%并删除属性padding:0px。总之，我认为您在嵌套元素中还存在其他问题，因此适合您的讲座是：

Bootstrap 4网格的工作原理
Box模型的工作原理

类似资料：

如何在Bootstrap 3中删除此水平滚动条

问题内容：我的引导页面上有这种令人讨厌的水平滚动。无法弄清楚是什么使它表现出这种行为或如何处理？ JsFiddle链接：http : //jsfiddle.net/FatAlbert/cd1syrd9/2/ HTML： CSS：问题答案：根据Bootstrap 3文档：必须将行放置在.container（固定宽度）或.container-fluid（全角）内，以便正确对齐和填充。因此，将
如何使JTextPane水平滚动

问题内容：我有一个，当行太多时，会出现滚动条，但是当行太长时，该行会分成两行，而不是出现水平滚动条，如何使水平条出现而不是分成两行，我的添加如下：问题答案：正如我们自己的Rob Camick 在这里介绍的那样，您可以尝试使用类似… 这将停止行/自动换行
如何使div填充剩余的水平空间？

问题内容：我有2个div：页面左侧有一个，右侧是一个。左侧的一个宽度固定，我希望右侧的一个填充剩余空间。问题答案：这似乎可以完成您想要的。
如何滚动动态填充的表

我需要滚动表来获取使用selenium和java绑定以及chrome驱动程序动态填充的表内容。这是另一个滚动，而不是窗口滚动本身。我能找到的所有可用的解决方案都是针对窗口滚动的。我在这里需要的是滚动桌子。我需要滚动突出显示的那个我收到以下错误消息错误消息：没有这样的元素：找不到元素：{“method”：“XPath”,“Selector”：“//*[@class='antiscroll-scr
如何使用水平滚动android显示图像

我正在使用Recyclerview显示项目列表。现在每次都可以有一些照片/多张照片，我需要在一行中水平滚动显示。我目前正在使用画廊小部件来显示照片，但因为它现在已被弃用，所以我想用一些其他的东西来显示与画廊相同的功能水平图像。你能帮帮我吗？非常感谢你的帮助。
CSS水平滚动

问题内容：我正在尝试创建一系列只能水平滚动的照片。它应该看起来像这样的但是，只有通过指定包含照片的的宽度，才能实现上述目的（因此它们不会“自动换行”）。如果我不放宽- 看起来像这样；使用CSS可以防止固定宽度的图像发生变化，该怎么办。谢谢问题答案：您可以使用与。这样写：

使用无填充时如何删除水平滚动条

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档