Question

我知道已经有一个相似的标题，但这并没有帮助。边框并未覆盖我尝试给height:100%的所有子div，并且照常无效。我将图像放在下面，在该图像中，边框应该覆盖所有内容。很感谢任何形式的帮助。

.strategy-card{
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  margin: 1%;
  padding: 5px;
  border-radius: 10px;
}

.tile{
  padding-bottom: 5%;
}

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<div class="border" style="height: auto;">
   <h4 class="text-center" style="margin-bottom: 2%;">Students who got answers right</h4>
   <div class="col-md-5 col-sm-12 text-center tile">
      <p>Correctness</p>
      <div style="display: flex;justify-content: center;">
         <div class="strategy-card col-md-3 col-sm-3 col-xs-12">
            <p>Right</p>
            <h3>20%</h3>
         </div>
         <div class="strategy-card col-md-3 col-sm-3 col-xs-12">
            <p>Wrong</p>
            <h3>20%</h3>
         </div>
         <div class="strategy-card col-md-3 col-sm-3 col-xs-12">
            <p>Unattempted</p>
            <h3>20%</h3>
         </div>
      </div>
   </div>
   <div class="col-md-3 text-center tile">
      Dominant Strategy
      <h4>By Elimination</h4>
      <h5> My strategy - Formula/Knowledge</h5>
   </div>
   <div class="col-md-3 text-center tile">
      <i class="fa fa-clock-o" aria-hidden="true"></i> Time Taken
      <h4>1m 02s</h4>
      <h5>My time - 2m</h5>
   </div>
</div>

Answer 1

您可以像这样添加row的引导类： <div class="row border">

演示下面的运行代码段

.strategy-card {
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  margin: 1%;
  padding: 5px;
  border-radius: 10px;
}

.tile {
  padding-bottom: 5%;
}

.border {
  border: 1px solid red;
  margin: 10px auto !important;
  width: 95%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div class="row border">
      <h4 class="text-center" style="margin-bottom: 2%">
        Students who got answers right
      </h4>
      <div class="col-md-5 col-sm-12 text-center tile">
        <p>Correctness</p>
        <div style="display: flex; justify-content: center">
          <div class="strategy-card col-md-3 col-sm-3 col-xs-12">
            <p>Right</p>
            <h3>20%</h3>
          </div>
          <div class="strategy-card col-md-3 col-sm-3 col-xs-12">
            <p>Wrong</p>
            <h3>20%</h3>
          </div>
          <div class="strategy-card col-md-3 col-sm-3 col-xs-12">
            <p>Unattempted</p>
            <h3>20%</h3>
          </div>
        </div>
      </div>
      <div class="col-md-3 text-center tile">
        Dominant Strategy
        <h4>By Elimination</h4>
        <h5>My strategy - Formula/Knowledge</h5>
      </div>
      <div class="col-md-3 text-center tile">
        <i class="fa fa-clock-o" aria-hidden="true"></i> Time Taken
        <h4>1m 02s</h4>
        <h5>My time - 2m</h5>
      </div>
    </div>

  </body>
</html>

Answer 2

这可能是由于您包含的自举样式。

您具有自举样式
您可以使用flex进行内联样式
顶部还有一些CSS。

如果使用引导边框类，可能会更容易。或不要使用引导程序。

边框未覆盖子div

2 个答案: