【问题标题】:Bootstrap columns cause horizontal scrollbar引导列导致水平滚动条
【发布时间】:2018-06-20 12:28:24
【问题描述】:

在本网站的“我的工作”部分: Website

有些东西导致它太宽了。

当您将鼠标悬停在项目上时(或触发 <div class="projectbox"> 上的 :hover 状态并查看项目图标(眼睛、github 和图像),我认为是最后一个项目的“图像”导致它。

但是,我不知道这是为什么。我应该从这些按钮中删除填充吗?我觉得这不是你应该做的。 (如果填充甚至是导致它发生的原因)。

相关代码:

【问题讨论】:

    标签: html css twitter-bootstrap twitter-bootstrap-3


    【解决方案1】:

    改变这个:

    .row {
        margin-right: -15px;
        margin-left: -15px;
    }
    

    到:

    .row {
        margin-right: 0px;
        margin-left: 0px;
    }
    

    【讨论】:

    • 嗯.. 解决了它。为什么它是从引导程序本身获得的?
    • 这不是最好的解决方案。行必须放置在容器或容器流体中。看看这个:stackoverflow.com/questions/27758457/…
    • 可能你有一行不在容器或容器流体中。
    【解决方案2】:

    水平滚动条通常是由错误地使用 Bootstrap 网格引起的。

    Ben Goossens 提出的解决方案是一种 hack,应该避免,因为它使 Bootstrap 的使用毫无意义。按预期使用 Bootstrap,您将不需要任何技巧或自定义 css 体操。

    这是你需要的:

    1) .container div

    2) .row div

    3) .col div

    这就是 Bootstrap 网格正常工作所需的“三位一体”。

    始终将所有正常内容放入 Bootstrap 列(依次进入一行,然后进入一个容器),您不会遇到任何水平滚动条问题。

    Bootstrap 行旨在与列一起使用。如果你把这两个中的一个排除在外,你就会遇到问题。

    【讨论】:

    • 是的,我就是这么想的。但是添加我之前删除的容器并没有修复它。
    • 不仅仅是容器。行是列的容器。因此,至少有一列必须进入 Bootstrap 行。
    • 另外,不要嵌套容器。 Bootstrap 容器不是为嵌套而设计的。您可以嵌套行和列,但不能嵌套容器。
    • 现在我有这个: (3x)
    • 你好像少了一个破折号...colmd之间没有空格。
    【解决方案3】:

    一个肮脏的小把戏对我有用。您可以在 .row 之前添加另一个 12 列网格:

    <div class="col-md-12">
        <div class="row">
            <div class="col-md-12">
        </div> 
    </div>
    

    【讨论】:

    • 这比使用!important 覆盖 Bootstrap 的原生排水沟系统要好得多,超过一半的答案试图这样做,但不幸的是,它打破了移动设备上的排水沟。
    【解决方案4】:

    您可以通过应用这些来解决此问题。它会工作

    .col-12{
        padding-right: 0!important;
        padding-left: 0!important;
    }
    .row{
        margin-right: 0px;
        margin-left: 0px; 
    }
    

    【讨论】:

      【解决方案5】:

      m-auto(自动边距)应用于行。

      没有m-auto 自动:

      .row {
        overflow-x: auto;
      }
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> Without margin auto:
      <div class="row">
        <div class="col-md">
          Column 1
        </div>
        <div class="col-md">
          Column 2
        </div>
      </div>

      m-auto 自动:

      .row {
        overflow-x: auto;
      }
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> Without margin auto:
      <div class="row m-auto">
        <div class="col-md">
          Column 1
        </div>
        <div class="col-md">
          Column 2
        </div>
      </div>

      【讨论】:

        【解决方案6】:

        如果您不想使用容器,因为它创建的边距,那么您可以使用 container-fluid。

        <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
        </div> 
        

        【讨论】:

          猜你喜欢
          • 2021-07-15
          • 1970-01-01
          • 2012-11-14
          • 2017-11-25
          • 2010-11-18
          • 2013-11-05
          • 2017-06-17
          • 2012-04-06
          • 1970-01-01
          相关资源
          最近更新 更多