不使用填充时如何删除水平滚动条 [英] How to remove horizontal scrollbar when using no padding

查看：41
本文介绍了不使用填充时如何删除水平滚动条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个问题:我想创建一个布局，但是一旦我删除了以下代码行 (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">...

<html lang="zh-cn"><头><title>引导程序示例</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><身体><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="#">带文本的导航栏</a><按钮类=导航栏切换器"类型=按钮"数据切换=折叠"数据目标=#navbarText"咏叹调控制=导航栏文本"咏叹调扩展=假"aria-label="切换导航"><span class="navbar-toggler-icon"></span><div class="collapse navbar-collapse" id="navbarText"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a><li class="nav-item"><a class="nav-link" href="#">特征</a><li class="nav-item"><a class="nav-link" href="#">价钱</a><span class="navbar-text">带有内联元素的导航栏文本</span>

</nav>

<div class="container-fluid"><div class="row"><div class="col-md-4"><div><div class="row m-1"><div class="col-md-11">聊天

<div class="col-md-1"><i class="fas fa-plus-circle"></i>

<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></表单>

<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">列出组项目标题</h5><small>3 天前</small>

<div class="row"><div class="col-md-11">Donec id elit non mi porta...

<div class="col-md-1"><span class="徽章徽章-主要徽章-药丸文本-权利">5</span>

</a>

<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"><!-- 它应该是全宽，但不幸的是，由于此部分就在此处出现了滚动条... --><div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"><img src="..." class="image-head-chat" alt="响应式图片"/>

<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">文本

<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">图标

<div class="row"><div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">新闻报

<div class="row"><div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">英加贝<div class="row">形式

</html>

解决方案

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

在您的情况下，我将从 p-0 的父 div 中删除类 row，然后删除类 col-md-12 来自 p-0，将 p-0 width 设置为 100%> 并删除属性 padding:0px.无论如何，我认为您的嵌套元素中还有其他问题，所以对您来说很好的讲座是:

I have a problem: I want to create a layout but a horizontal scrollbar appears as soon as i remove the padding at the following line of codes (p-0). Is there a chance that i can remove the padding and no scrollbar to appear? I dont know what to do, maybe you guys can help me. The problem is I want to have the col the full length without padding, but when I remove the padding the horizontal scrollbar appears.

...

<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">
...


<!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>

解决方案

Probably you've implemented your grid incorrectly. Avoid to add additional styles to bootstrap classes and use .row when needed. When you need custom styles use wrappers inside .container, .row and .col so you can manage them without altering bootstrap behavior.

In your case, I would remove the class row from the parent div of p-0, then remove the class col-md-12 from p-0, setting the p-0 width to 100% and removing the properties padding:0px. Anyway, I think you've additional issues in your nested elements so good lectures for you are:

这篇关于不使用填充时如何删除水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆