Question

我的页面宽度有问题。无论我尝试什么，它左边或右边都有白边（默认情况下在右边，如果我使用边距右边：0）。如果我使用保证金：0比保持在右边。尝试了我所知道的一切，无法摆脱它。使用asterix为整页清除边距没有帮助，将宽度设置为100％没有帮助。我不知道，也许sidenav引起了所有这些问题，但老实说，我看不到那样的事情。

顶部的导航栏很好，它占用了页面宽度的100％。问题从容器下面开始。

<script>
  function openSlideMenu(){
    document.getElementById('side-menu').style.width = '250px';
    document.getElementById('main').style.marginRight = '250px';
  }

  function closeSlideMenu(){
    document.getElementById('side-menu').style.width = '0';
    document.getElementById('main').style.marginRight = '0';
  }
</script>

*{
  margin:0;
  padding: 0;
}

body{
  line-height: 1.6em;
  font family: Arial, Helvetica, Sans-Serif;
  font-size: 16px;
  color: #FFFFF0;
}


.navbar-nav a{
  text-decoration: none;
  color: #f4f4f4;
  font-size: 30px;
  font-family: Arial Sans-serif;
  margin: 0 15px 0 15px;
}

.navbar-nav a:hover{
  color:#999999;
}

.navbar-nav{
  margin-left: 180px;
}

.side-nav{
  height:100%;
  width:0;
  position:fixed;
  z-index:1;
  top:0;
  right:0;
  background-color:#111;
  opacity:0.9;
  overflow-x:hidden;
  padding-top:60px;
  transition:0.5s;
}

.side-nav a{
  padding:10px 10px 10px 30px;
  text-decoration:none;
  font-size:22px;
  color:#ccc;
  display:block;
  transition:0.3s;
}

.side-nav a:hover{
  color:#fff;
}

.side-nav .btn-close{
  position:absolute;
  top:0;
  left:22px;
  font-size:36px;
  margin-right:50px;
}

#main{
  transition:margin-right 0.5s;
  padding:20px;
  overflow:hidden;
  width:100%;
}

.container{
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #cc0000;
  width:100vw;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <title>Hartstown Huntstown FC | Home</title>
</head>
<body>
  <div style="background-color: #1a1a1a;">
    <div class="navbar navbar-expand-lg">
        <a class="navbar-brand" href="index1.html"><img src="images/logo.jpg" alt="Company logo"></a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav ml-auto">
                <li><a class="nav-item nav-link" href="history.html">HISTORY</a></li>
                <li><a class="nav-item nav-link" href="contact.php">CONTACT</a></li>
                <li><a class="nav-item nav-link" href="teams.html">TEAMS</a></li>
                <li><a class="nav-item nav-link" href="gallery.html">GALLERY</a></li>
                <li><a class="nav-item nav-link" href="https://www.balondirect.com/club-shop/hartstown-huntstown-fc.html">SHOP</a></li>
            </ul>
        </div>
        <span class="open-slide">
          <a href="#" onclick="openSlideMenu()">
            <svg width="30" height="30">
                <path d="M0,5 30,5" stroke="#fff" stroke-width="5"/>
                <path d="M0,14 30,14" stroke="#fff" stroke-width="5"/>
                <path d="M0,23 30,23" stroke="#fff" stroke-width="5"/>
            </svg>
          </a>
        </span>
    </div>
</div>

<div id="side-menu" class="side-nav">
  <a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a>
  <a href="index1.html">Home</a>
  <a href="history.html">History</a>
  <a href="contact.php">Contact</a>
  <a href="teams.html">Teams</a>
  <a href="gallery.html">Gallery</a>
  <a href="https://www.balondirect.com/club-shop/hartstown-huntstown-fc.html">Shop</a>
</div>

<div class="container" id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem unde repellendus reiciendis illo ipsam labore nostrum nihil assumenda magni quod hic saepe accusantium, quam nemo illum, dicta harum! Commodi rem ipsum dolor sit amet, consectetur adipisicing elit. </p>

</body>
</html>

Answer 1

可能是Bootstrap container类添加了空格。您应该inspect Chrome中的元素，它会告诉您哪个CSS正在该特定元素上运行。

对于全宽容器，您应该使用Bootstrap container-fluid类。

修改主引导类（例如container）的CSS几乎不是一个好主意。最好使用自己的规则添加其他类或id。

<div class="container container--mysite" id="main">

即。在上面你添加了一个名为container--mysite的修饰符类。如果你有CSS特异性/优先级的问题，那就更具体了。

e.g。

.container--myapp { myrules}
// if the above doesn't work, try...
#main .container { myrules }
.container .container--mysite {myrules}

将生成CSS，该CSS将覆盖标准容器类的标准Bootstrap规则

为了在CSS中有一些结构，如果你没有使用SASS / LESS创建你的CSS，请查找'Block Element Modifier CSS'。

如何摆脱页面的白边并使其100％宽

1 个答案: