如何消除页面上的空白边距并使之宽100％
[英]How to get rid of white margin from the page and make it 100% wide
问题描述
I have a problem with my page width. 
我的页面宽度有问题。 Whatever I try it has white margin on the left or right (on the right by default, on the left if I use margin-right:0). 无论我尝试什么，它的左边或右边都有白色边距（默认情况下在右边，如果我使用margin-right：0则在左边）。 If I use margin:0 than it stays on the right. 如果我使用margin：0，那么它将保留在右边。 Tried everything I know and can't get rid of it. 尝试了我所知道的一切并且无法摆脱它。 Clearing margins using asterix for whole page didn't help, setting width to 100% didn't help. 在整个页面上使用asterix清除页边距没有帮助，将宽度设置为100％也无济于事。 I don't know, maybe the sidenav caused all these issues but I honestly can't see anything like that. 我不知道，也许sidenav引起了所有这些问题，但老实说我看不到这样的事情。
Navbar at the top is fine, it take 100% of the width of the page. 顶部的导航栏很好，它占用页面宽度的100％。 Problem starts underneath with the container. 问题始于容器的下方。
<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()">×</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>
1 个解决方案
解决方案1
2 已采纳 2018-04-14 15:06:38
It is probably the Bootstrap container class adding your white space. 可能是Bootstrap container类增加了空白。 You should inspect the elements in Chrome, and it will tell you which CSS is operating on that particular element. 您应该inspect Chrome中的元素，它会告诉您哪个CSS正在该特定元素上运行。
For a full width container, you should probably be using the Bootstrap container-fluid class. 对于全宽度容器，您可能应该使用Bootstrap container-fluid类。
It is rarely a good idea to modify the CSS for a main bootstrap class such as container . 修改主引导程序类（例如container的CSS几乎不是一个好主意。 It is better to add additional classes or id with your own rules. 最好使用自己的规则添加其他类或ID。
<div class="container container--mysite" id="main">
ie in the above you have added a modifier class called container--mysite . 即在上面，您添加了一个名为container--mysite的修饰符类。 If you have problems with CSS specificity/priority just be more specific. 如果您在CSS特殊性/优先级方面遇到问题，请更加具体。
eg 例如
.container--myapp { myrules}
// if the above doesn't work, try...
#main .container { myrules }
.container .container--mysite {myrules}
will produce CSS which overrides the standard Bootstrap rules for the standard container class 将产生CSS，该CSS覆盖标准容器类的标准Bootstrap规则
In order to have some structure in your CSS, look up 'Block Element Modifier CSS' if you're not using SASS/LESS to create your CSS. 为了在CSS中具有某种结构，如果您未使用SASS / LESS创建CSS，请查找“块元素修饰符CSS”。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.