删除div前后的空白。
删除div前后的空白。
提问于 2018-06-04 12:14:53
现在是我使用靴带的第一时间。我阅读了关于https://getbootstrap.com/docs/4.1/的文档和一些关于https://www.w3schools.com/bootstrap/的教程。
我创建了这个页面：
<!doctype html>
<html lang='en'>
<head>
<!-- required meta tags -->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'> <!-- responsive meta tag -->
<!-- bootstrap CSS -->
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css' integrity='sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB' crossorigin='anonymous'>
<title>Hello, world!</title>
</head>
<body>
<!--------------------------------------------------------------------------------------------------------->
<!---------------------------------------------- NAV BAR END ---------------------------------------------->
<nav class='navbar navbar-expand-sm bg-dark navbar-dark'>
<a class='navbar-brand' href='#'>Navbar</a>
<button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#collapsibleNavbar'>
<span class='navbar-toggler-icon'></span>
</button>
<div class='collapse navbar-collapse' id='collapsibleNavbar'>
<ul class='navbar-nav'>
<li class='nav-item'>
<a class='nav-link' href='#'>Link</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='#'>Link</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='#'>Link</a>
</li>
</ul>
</div>
</nav>
<!---------------------------------------------- NAV BAR END ---------------------------------------------->
<!--------------------------------------------------------------------------------------------------------->
<!------------------------------------------------------------------------------------------------------>
<!---------------------------------------------- CONTAINER --------------------------------------------->
<div class='container'>
<div class='row'>
<div class='col-sm-4' id = 'bubblemap' style='background-color:tomato;'>.col-sm-4</div>
<div class='col-sm-8' id = 'heatmap' style='background-color:steelblue;'>.col-sm-8</div>
</div>
<div class='row'>
<div class='col-sm-12' id = 'smallMultiples' style='background-color:greenyellow;'>.col-sm-12</div>
</div>
</div>
<!---------------------------------------------- CONTAINER END ----------------------------------------->
<!------------------------------------------------------------------------------------------------------>
<!---------------------------------------------------------------------------------------------------->
<!---------------------------------------------- FOOTER ---------------------------------------------->
<div class='jumbotron text-center' style='margin-bottom:0'>
<p>Footer</p>
</div>
<!---------------------------------------------- FOOTER END -------------------------------------------->
<!------------------------------------------------------------------------------------------------------>
<!-- optional JavaScrip: jQuery first, then Popper.js, then Bootstrap -->
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js' integrity='sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49' crossorigin='anonymous'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js' integrity='sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T' crossorigin='anonymous'></script>
</body>
</html>(代码在这里)。
我喜欢设备视图，但不喜欢更大的视图。我想去掉番茄和石灰之前的空白，以及钢蓝色和石灰隔墙之后的空白。我该怎么做？我只想去掉空白处，而不是垫子。
非常感谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-04 12:19:27
你在找的是container-fluid而不是container。这是全宽度容器.
https://codeply.com/go/PZQnLvtsoc
另外，请参考引导文档，它比W3schools上的信息更可靠和最新.https://getbootstrap.com/docs/4.1/layout/overview/#containers
Stack Overflow用户
发布于 2018-06-04 12:54:17
在第41行，将“容器”改为“容器-流体”
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50680382
复制相关文章
相似问题
腾讯云开发者
