【发布时间】：2020-03-23 12:51:24
【问题描述】：
作为一个新的引导用户，我正在尝试将文本和图像并排放在一个容器中。
像这样：
蓝色 = 设备屏幕， 黑色 = 可见容器
当我尝试这样做时，虽然我发现某些东西导致嵌入的地图向下移动。
ether 的方式似乎没有任何边距或填充。当我在 CSS 中明确将其设置为黑色时，我也不知道为什么文本是蓝色的。
我的 HTML：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/locations.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Locations | Location 1</title>
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a href="../index.html">
<img src="https://via.placeholder.com/100x40" alt="../index.html">
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-large nav-text-bold" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Locations</a>
<div class="dropdown-menu text-mid" aria-labelledby="dropdown01">
<a class="dropdown-item nav-text-bold" href="locations/location1/index.html">Location 1</a>
<a class="dropdown-item nav-text-bold" href="#">Location 2</a>
<a class="dropdown-item nav-text-bold" href="#">Location 3</a>
<a class="dropdown-item nav-text-bold" href="#">Location 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link text-large nav-text-bold" href="#">Media</a>
</li>
<li class="nav-item">
<a class="nav-link text-large nav-text-bold" href="donate/index.html">Donate</a>
</li>
<li class="nav-item text-large">
<a class="nav-link nav-text-bold" href="#">About</a>
</li>
</ul>
</nav>
<br>
<br>
<div class="container">
<div id="content">
<div class="jumbotron">
<h2>Location 1</h2>
<br>
<br>
<div class="text-info">
<p>1600 Pennsylvania Ave NW, Washington, DC 20500</p>
<br>
<p>Open Weekdays sometime to sometime</p>
<br>
<p>Tel:
<a href="tel:555-555-5555"><b>555-555-5555</b></a></p>
<div class="maps-embed">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3105.1501993708266!2d-77.03871848469284!3d38.89768045453255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b7bcdecbb1df%3A0x715969d86d0b76bf!2sThe%20White%20House!5e0!3m2!1sen!2sus!4v1574888816470!5m2!1sen!2sus" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
我的 CSS：(locations.css)
.container{
text-align: center;
}
.jumbotron{
padding-left: 10px;
padding-right: 10px;
}
.text-info{
color: black;
text-align: left;
}
.maps-embed{
text-align: right;
}
.headerText{
padding-top: 10%;
}
.text-mid{
font-size: 120%;
text-decoration: underline;
}
.text-mid:hover::after{
text-decoration: underline;
}
.text-large{
font-size: 140%;
text-decoration: underline;
}
.text-large:hover{
text-decoration: underline;
}
.nav-text-bold{
font-family: 'Roboto', sans-serif;
}
编辑：有人提供了一个使用 Bootstraps Grid 系统的半工作版本，有人可以进一步解释如何在这里实现 Grid 系统吗？
【问题讨论】：
标签： html css twitter-bootstrap bootstrap-4