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">

它将使divs具有响应性。
在小于768px（md断点）的屏幕上，它将获得全宽。
您可以根据需要通过sm更改md。
More about bootstrap breakpoints。

Answer 2

最好使用css min-width属性，因为您已经在静态电压下使用了所有容器和元素，请查看我的解决方案

body {
  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;
    min-width:300px;
}

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

您还可以使用overflow：hidden属性隐藏内容，或使用overflow：auto使用滚动条

Answer 3

* {
  background: #0E2A38;
  margin: 0;
  padding: 0;
}

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

p {
    word-break: break-word;
}

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <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">
</head>
<body>

<div class="container">
  <div class="row align-items-center">
    <div class="col-md-9 col-12">
      <div class="box">
      </div>
    </div>

    <div class="col-12 col-md-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>
</div>
</body>
</html>

在使用.container之前先使用.row，也要避免使用高度。为了使两个div垂直对齐，我使用了.align-items-center。供参考通过 https://getbootstrap.com/docs/4.0/utilities/flex/ 此链接

无法使此框响应

3 个答案: