Question

在表格下方的联系页面上，我有一个Google Maps iframe，然后是一条垂直线，然后是一连串的联系信息。

垂直线是通过在包含Google Map的列上设置右边框，然后在左侧列的右侧和右侧列的左侧设置填充来实现的。

不幸的是，当我调整页面大小时，联系信息会下降而没有垂直线。我想做的是使垂直线消失，联系信息下降到下一行，并在Google Map和联系信息之间创建一条水平线。

<div class="container" style="padding-top:4em">
  <h3 class="h1 text-center" style="padding-bottom:1em">Our Classroom</h3>
  <div class="row">
    <div class="col-sm" style="padding-right:1em; border-right: 1px solid #ccc;">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d198741.27545049458!2d-77.15466081348372!3d38.893512762965!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7c6de5af6e45b%3A0xc2524522d4885d2a!2sWashington%2C+DC!5e0!3m2!1sen!2sus!4v1560167966705!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div>
    <div class="col-sm" style="padding-left:20px">
      <p>address</p>
      <p>phone</p>
      <a href="mailto:email">email</a>
    </div>
  </div>
</div>

我真的不知道该怎么做，因为对Bootstrap来说还很陌生，所以我们将不胜感激！

谢谢！

Answer 1

您可以借助媒体查询来完成

@media only screen and (min-width: 992px) {
    .iframe_block {
        border-right: 1px solid #ccc;
    }
} 

@media only screen and (max-width: 992px) {
    .iframe_block {
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
    }
}

<div class="container" style="padding-top:4em;">
    <h3 class="h1 text-center" style="padding-bottom: 1em;">Our Classroom</h3>
    <div class="row">
        <div class="col-sm iframe_block" style="padding-right:1em;">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d198741.27545049458!2d-77.15466081348372!3d38.893512762965!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7c6de5af6e45b%3A0xc2524522d4885d2a!2sWashington%2C+DC!5e0!3m2!1sen!2sus!4v1560167966705!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
        </div>
        <div class="col-sm" style="padding-left:20px">
            <p>address</p>
            <p>phone</p>
            <a href="mailto:email">email</a>
        </div>
    </div>
</div>

Bootstrap 4-如何使元素根据页面宽度更改位置？

1 个答案: