Html 文本和GMAP在引导中一起嵌入到容器行中_Html_Css_Twitter Bootstrap_Bootstrap 4

Html 文本和GMAP在引导中一起嵌入到容器行中

html css twitter-bootstrap bootstrap-4

Html 文本和GMAP在引导中一起嵌入到容器行中,html,css,twitter-bootstrap,bootstrap-4,Html,Css,Twitter Bootstrap,Bootstrap 4,作为一个新的bootstrap用户，我正试图将文本和图像并排放在一个容器中像这样：蓝色=设备屏幕，黑色=可见容器当我尝试这样做时，我发现有些东西导致嵌入的贴图向下移动没有出现任何空白或填充的方式。我也不知道为什么文本是蓝色的，当我在CSS中清楚地将其设置为黑色时我的HTML： <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini

作为一个新的bootstrap用户，我正试图将文本和图像并排放在一个容器中

像这样：

蓝色=设备屏幕，黑色=可见容器

当我尝试这样做时，我发现有些东西导致嵌入的贴图向下移动

没有出现任何空白或填充的方式。我也不知道为什么文本是蓝色的，当我在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>

编辑：有人提供了一个使用引导网格系统的半工作版本，有人能进一步解释一下如何在这里实现网格系统吗？

.container{
文本对齐：居中；
}
琼伯伦先生{
左侧填充：10px；
右边填充：10px；
}
.文本信息{
颜色：黑色；
文本对齐：左对齐；
}
.地图嵌入{
文本对齐：右对齐；
}
.标题文字{
垫面：10%；
}
.中文本{
字体大小：120%；
文字装饰：下划线；
}
.text mid:hover:：after{
文字装饰：下划线；
}
.文本大{
字体大小：140%；
文字装饰：下划线；
}
.文本大：悬停{
文字装饰：下划线；
}
.nav文本加粗{
字体系列：“Roboto”，无衬线；
}


位置|位置1














地点1
华盛顿特区宾夕法尼亚大道西北1600号，邮编20500


在工作日的某个时间到某个时间开放


电话：

很抱歉，您删除了jumbotron，但没有解决我的文本着色问题，我非常感谢您清理了我的代码，我现在有理由相信我的问题可以通过某种方式使用引导的网格系统来解决，但您的修复依赖于删除我的jumbotron。

.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;
}