Javascript 引导4定位，iframe和按钮元件未对齐

我正在使用一个iframe音乐播放器小部件，旁边有一个我自己的按钮

我似乎无法将它们排列在一起，这里是一个屏幕截图：

以下是（我认为）与这些元素相关的所有代码：

HTML: 
    <div class="row fixed-top" id="mixRow">
        <div class="col-md-12" id="mixCol">
          <div id="mix-display">
            <iframe width="50%" height="60" id="my-widget-iframe" frameborder="0"></iframe>
          </div>
            <button class="btn-square" id="skipButton">Skip</button>
            <div id="weatherText"></div>
        </div>
      </div>

---

如下面的代码片段所示，通过嵌套两个项目（iframe和he skip按钮），您可以轻松实现目标

首先在列中放入一个

.row

，然后在其中放入两列（

.col

）

将

iframe

放入第一列，将按钮放入第二列，并为第二列指定class

.col auto

，以根据需要自动调整列大小。完成了

如果要使按钮居中，请将classes

d-flex align items center

添加到其列中

为了从行中删除排水沟，我添加了

no-gutters

类，还将

bg secondary

类添加到了

iframe

+按钮列中的

bg warning

，以查看发生了什么

单击下面的“运行代码段”按钮，并展开到整个页面：

跳过
这里有天气预报。。。

谢谢，这完美地解决了垂直对齐问题。由于某种原因，现在播放器和按钮之间有一个相当大的空间。有什么想法吗？我现在就开始修补它！修正了它，我只需要增加混合显示CSS属性的宽度！

JS:
if (weatherCode > 950 && weatherCode < 956){
    $('#mix-display').html('<iframe width="100%" height="60" src=' + breezy[Math.floor(Math.random() * breezy.length)] + ' frameborder="0"></iframe>');
      }

#mixRow{
  margin-left: 0;
  padding: 0;
  margin-top: 22%;
  height: 60px;
}

#mixCol{
  padding:0;
  margin-left: 0;
  height: 60px;
}

#mix-display{
  padding: 0;
  width: 75%;
  display: inline-block;
}

#skipButton{
  background-color: #333;
  border-color: #101418;
  border: 1px;
   font-family: Open Sans,sans-serif;
   font-size: 100%;
  color: #d1d1d1;
  width: 60px;
  height: 60px;
  font-size: 15px;
  padding: 0;
  margin-left: 1px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  }

button{
  margin-left: 5px;
}

.btn{
  color: white;
  background: rgba(230, 230, 260, 0.6);
  border-color: rgba(230, 230, 260, 0.6);
  border: none;
  border-style: none;
  outline: none;
  height: 30px;
  font-size: 100%;
}

.btn:hover{
  background: rgba(200, 200, 260, 0.65);
  outline: none;
}