我在iframe中嵌入了一些儀表板小部件。我想讓他們有所反應。因此，當我縮小屏幕尺寸時，我希望每個小部件占據整個寬度，當瀏覽器窗口很大(md+)時，我希望它們并排出現:

iframe {
  background: pink;
  border: 1px solid #333 !important;
}

<link rel="stylesheet"  integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div id="myContainer" class="flex-row container-fluid col-xs-12 col-xl-8 pl-0 pr-0 pl-lg-4 pr-lg-4">
  <div class="row" style="padding-bottom: 160px;">
    <div class="col-12 col-md-6 pr-1 mt-1 col">
      <iframe src="iframe-link" allowfullscreen="" style="display: initial; height: 200%; border: 0px; width: 100%;"></iframe>
    </div>

    <div class="col-12 col-md-6 pl-md-1 mt-1 col">
      <iframe src="iframe-link" allowfullscreen="" style="display: initial; height: 200%; border: 0px; width: 100%;"></iframe>
    </div>
  </div>
</div>

你這里有很多問題。您絕對不應該在同一個元素上有一個容器、一個flex行和一個列。我建議查看一下grid和flex文檔，然后決定使用哪一個。

之后，不要通過在容器和行上添加填充來弄亂網格。它們是精心編排的元素，填充會把事情弄糟。如果您希望內容周圍有更多的間距，請在列中添加填充，或者在內容中添加邊距。如果您試圖刪除默認的列間距，請查看裝訂線文檔。

請注意，我從iframes中移除了200%的高度。我不確定這樣做的目的是什么，但一般來說，最好讓它們保持自然高度。

順便說一下，col-12不是Bootstrap 4+中的東西。只需將類用于您想要定義列的斷點范圍。在較小的屏幕尺寸下，該元素默認為全角。

那么，內聯樣式對所有參與者來說都是一場噩夢。它們很難一眼就能發現和解釋，而且需要大量的重復。您可以隨意使用這個庫，并使用自定義CSS類來處理您需要的一些樣式。

iframe.my-class {
  display: initial;
  border: 0px;
  width: 100%;
  background: pink;
  border: 1px solid #333 !important;
}

<link rel="stylesheet"  integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div id="myContainer" class="container-fluid">
  <div class="row">
    <div class="col-md-6 mt-1">
      <iframe src="iframe-link" allowfullscreen class="my-class"></iframe>
    </div>

    <div class="col-md-6 mt-1">
      <iframe src="iframe-link" allowfullscreen class="my-class"></iframe>
    </div>
  </div>
</div>

補充道。iframe-container為iframe創建一個響應容器

.iframe-container {
  position: relative;
  /*adjust as needed to increase height*/
  padding-bottom: 50%;
  height: 0;
  overflow: hidden;
  margin-bottom: 10px
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: orange;
  border: 1px dotted black !important
}

<link rel="stylesheet"  integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<style>

</style>

<div id="myContainer" class="container-fluid">
  <div class="row">
    <div class="col-sm-12 col-md-6 pr-md-1 mt-1">
      <div class="iframe-container">
        <iframe src="iframe-link" allowfullscreen=""></iframe>
      </div>
    </div>

    <div class="col-sm-12 col-md-6 mt-1">
      <div class="iframe-container">
        <iframe src="iframe-link" allowfullscreen=""></iframe>
      </div>
    </div>
  </div>
</div>

你的代碼中的問題是，你給了iframe元素200%的高度。200%意味著父代身高的兩倍。正因為如此，它從母體中溢出。

一個簡單的解決方法是給iframe元素指定高度:100%。因此，它采用父div的完整高度。

以下是更新后的代碼:-

iframe {
      background: pink;
      border: 1px solid #333 !important;
    }

<link rel="stylesheet" 
    integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div id="myContainer" class="flex-row container-fluid col-xs-12 col-xl-8 pl-0 pr-0 pl-lg-4 pr-lg-4">
    <div class="row" style="padding-bottom: 160px;">
      <div class="col-12 col-md-6 pr-1 mt-1 col">
        <iframe src="iframe-link" allowfullscreen=""
          style="display: initial; height: 100%; border: 0px; width: 100%;"></iframe>
      </div>

      <div class="col-12 col-md-6 pl-md-1 mt-1 col">
        <iframe src="iframe-link" allowfullscreen=""
          style="display: initial; height: 100%; border: 0px; width: 100%;"></iframe>
      </div>
    </div>
  </div>