html - 无法使此框响应

Question

我试图将一些内容放入一个框中，但我无法使文本和按钮适合中小屏幕上的框。我尝试了一些方法，但到目前为止都没有奏效。

这是我当前的代码:

* {
  background: #0E2A38;
}

.box {
  color: white;
  height: 230px;
  background: green;
}

.explore {
    font-size: 15px;
    text-align: center;
    padding: 35px 25px;
    height: 230px;
    color: white;
    background: #3161a3;
}

#exploreButton {
    width: 85%;
    color: #3161a3;
    background: white;
    border-radius: 2px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="row d-flex">
  <div class="col-9">
    <div class="box">
    </div>
  </div>

  <div class="col-3">
    <div class="explore">
      <p id="exploreTitle">At vero eos et accusamus et iusto</p>
      <p id="exploreParagraph">Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
        Recusandae dicta ut illo reiciendis delectus maiores dicta.</p>
      <button type="button" class="btn" id="exploreButton">Explore</button>
    </div>
  </div>
</div>

Answer 1

只需添加

<div class="row d-flex">
  <div class="col-12 col-md-9">
    <div class="box">
    </div>
  </div>

  <div class="col-12 col-md-3">
    <div class="explore">

这将使 div 响应。
它将在 768px(md 断点)以下的屏幕上获得全宽。
如果需要，您可以将 md 更改为 sm。
More about bootstrap breakpoints .