如何删除侧滚动？

Question

我正在尝试删除屏幕右侧剩余的白色 space。我尝试将容器的 css 样式设置为填充 0 和边距 0，包括后面的重要标记。我确实有一个 div 大小的 col 4 并且在检查器工具中它显示填充 12 但是当我对其应用 0 填充时，它仍然存在导致侧滚动。我什至给它贴上了 important 标签，它仍然存在。以下是我正在处理的网站的实时 link。我将在下面包含 CSS 代码。 https://abraham-solis.github.io/reactPortfolio/. This is the styling library im using https://reactstrap.github.io/?path=/story/home-installation--page

着陆页CSS

.hide {
  background: black;
  overflow: hidden;
}

/* Spans are inline Elements so need Display inline-block to move */
.hide span {
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  display: inline-block;
}

#GG {
  text-decoration: none;
  color: inherit;
}

.space {
  margin: 0 !important;
  padding: 0 !important;
}

@media screen and (max-width:600px) {
  .land {
    max-width: 100%;
    max-height: 100%;
  }

  .big-text {
    text-align: center;
  }

  .nav-links li {
    padding-left: 0;
    text-align: center;
    justify-content: space-around;
    padding-right: 3px;
   
  }

  ul{
    padding-left: 0 !important;
  }

  #logo{
    text-align: center;
    padding-bottom:10px ;

  }

  .intro-text, .text{
    text-align: center;
  }

}

项目部分CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.bg {
  background-color: rgb(15, 39, 63);
  width: 100%;
  overflow: hidden;
}

.header {
  text-align: center;
  padding-left: 10rem;
  padding-top: 9rem;
  margin-bottom: 80px;
  font-size: 5rem;
  font-family: "Lobster", cursive;
  color: rgb(255, 249, 254);
  text-shadow: 2px 2px #ff24a4;
  text-align: center;
  filter: drop-shadow(5px 5px 5px black);
  -webkit-filter: drop-shadow(5px 5px 5px black);
}

.title {
  font-family: "Heebo", sans-serif;
  font-size: 2rem;
  color: rgb(15, 39, 63);
}

.summary {
  font-family: "Heebo", sans-serif;
  font-size: 1rem;
  color: rgb(15, 39, 63);
}



@media only screen and (max-width: 600px) {
  .container {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
  }

  .header {
    text-align: center;
  }

  .paragraph {
    text-align: center;
  }

  .z{
    z-index: 5;
  }

 
}

.stretch{
  min-width: 100% !important;
}

Answer 1

我看不到你的 html 代码，但你的 div 有问题，它的 class 名称为 row

Answer 2

您可以使用

使滚动条不可见

.[insert div name]::-webkit-scrollbar 
{
  display: none;
}

Answer 3

在“关于我”部分，您的页边距溢出了。查找 .row class 并检查您正在进行的计算。

这个：

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--bs-gutter-x)*-.5);
    margin-right: calc(var(--bs-gutter-x)*-.5);
    margin-top: calc(var(--bs-gutter-y)*-1);
   }

更改为例如（或编辑 calc 使其不溢出）：

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: calc(var(--bs-gutter-y)*-1);
   }

Answer 4

禁用 .row class 的 margin-left 和 margin-right 属性。

Answer 5

来源：https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

您将需要 CSS 并且您有 2 个选项：

选项 #1) 隐藏水平和垂直滚动条。

添加溢出：隐藏；到 body

选项 #2) 隐藏滚动条但保留功能

隐藏 Chrome、Safari 和 Opera 的滚动条

.example::-webkit-scrollbar {
 display: none;
}

隐藏 IE、Edge 和 Firefox 的滚动条

.example {
 -ms-overflow-style: none;  /* IE and Edge */
 scrollbar-width: none;  /* Firefox */
}

如何删除侧滚动？

How to remove side scroll?

html

css

reactjs

reactstrap