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

【问题标题】：Bootstrap 4 - How to make elements change location based on page width?Bootstrap 4 - 如何使元素根据页面宽度更改位置？
【发布时间】：2019-10-24 19:58:35
【问题描述】：

在表单下方的联系页面上，我有一个谷歌地图 iframe，然后是一条垂直线，然后是一堆联系信息，都在同一行。

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

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

<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 很陌生，所以任何帮助都将不胜感激！

谢谢！

【问题讨论】：

您是否将样式写入 div 元素以询问您的问题_还是以这种方式编码？
它们是这样编码的。是的，不好的约定，但我计划稍后清理所有内容。
如果它们是这样编码的，那么 Bootstrap 的响应式设计将不适合您，并且任何效果都将是“不可预测的”_您的样式需要从一开始就进行编码并与媒体分开查询，以便页面格式（或您正在设计的表单周围的元素）响应正在查看页面的屏幕大小_这是引导程序的基本目的_如果您希望 BS4 为您工作（至少作为初学者）那么您应该考虑以传统方式使用该框架，并且几乎根据 BS4 指南_
用你的代码中的一个例子来澄清一下：如果 padding-top 样式被编码到 div .container 元素中_那么不管查看屏幕的大小_填充空间将始终为 4em（并且因此对查看设备“无响应”）

标签： twitter-bootstrap responsive-design bootstrap-4

【解决方案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>

【讨论】：

谢谢！对我拥有的其他一些 CSS 稍作修改，它就起作用了！
很高兴你喜欢我的回答