Question

我正在使用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标签的Javascript：

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>');
      }

这是所有相关元素的CSS：

CSS：

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

Answer 1

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

您首先将.row放入列中，然后将2列（.col）放入其中。

将iframe放入第一列，将按钮放入第二列，并为第二列提供类.col-auto，以根据需要自动调整列大小。完成！

如果要将按钮居中，请将类d-flex align-items-center添加到其列中。

要从行中移除排水沟，我向其添加了no-gutters课程，并将bg-secondary课程添加到按钮列的iframe + bg-warning看看发生了什么。

点击下面的“运行代码段”按钮，然后展开到整页：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row fixed-top" id="mixRow">
        <div class="col-md-12" id="mixCol">
            <div class="row no-gutters">
                <div class="col">
                    <div id="mix-display" class="bg-secondary">
                        <iframe width="50%" height="60" id="my-widget-iframe" frameborder="0"></iframe>
                    </div>
                </div>
                <div class="col-auto d-flex align-items-center bg-warning">
                    <button class="btn btn-square" id="skipButton">Skip</button>
                </div>
            </div>
            <div id="weatherText">Weather text goes here...</div>
        </div>
    </div>
</div>

Bootstrap 4定位，iframe和按钮元素不对齐

1 个答案: