это первый раз, когда я использую Bootstrap.Я читаю документацию по 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>
(код здесь).
Результат это , если есть маленький экран, и это , если экран большего размера.
Мне нравится вид устройства, но не увеличенный вид.Я хочу удалить пробел перед разделением томатов и извести, а также разделением стали и извести.Как я могу сделать?Я хочу удалить только поле, а не отступы.
Большое спасибо