Question

我有一个使用引导程序容器和行的页面，其中最好的部分工作正常。有些专栏有CSS圆用作量规。

我对行的最后一列有问题，当我在面板div中添加div框，然后向div中添加文本时，它会推挤所有其他列以增加其大小。

没有文本，只有div就可以了。我想不出办法阻止这种情况

这是一个屏幕截图，未添加任何文本，因为您可以看到仪表看起来不错

这是代码

body {
  height: 100%;
}

#container {
  margin: 1% 1% 1% 0%;
  padding: 5px;
  background: black;
  background-size: cover;
}

.panel {
  margin: 0% 0% 85% 0%;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 255, 0.5);
  border-radius: 10px;
}

.weatherpanel {
  margin: 0% 0% 0% 0%;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 255, 0.5);
  border-radius: 10px;
}

.gaugeTitle {
  text-align: center;
  color: white;
  font-size: 3vw;
}

.outerGauge {
  margin: 10% 0% 0% 13%;
  /*top right bottom left */
  border-radius: 50%;
  width: 60%;
  height: 60%;
  background: black;
  box-shadow: 0 0 0 5px red;
  position: absolute;
}

.innerGauge {
  margin: 8% 0% 0% 7%;
  /*top right bottom left */
  border-radius: 50%;
  width: 85%;
  height: 85%;
  background: green;
  box-shadow: 0 0 10px 4px green;
  position: absolute;
}

.gaugeText {
  margin-top: -5%;
  text-align: center;
  color: black;
  font-size: 7vw;
}

.stocks {
  margin: auto;
  height: 10%;
  color: white;
  font-size: 2vw;
  border: solid;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <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">
  <link rel="stylesheet" href="index.css">
  <title>Dashboard</title>
</head>

<body>
  <div id="container">
    <div class="row">
      <div class="col-sm-4">
        <div class="weatherpanel">
        </div>
      </div>
      <div class="col-sm-8">
        <div class="row">
          <div class="col-sm-4">
            <div class="panel">
              <div class="gaugeTitle" id="wateTitle"></div>
              <div class="outerGauge">
                <div class="innerGauge" id="water">
                  <div class="gaugeText" id="waterGauge">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="panel">
            </div>
          </div>
          <div class="col-sm-4">
            <div class="panel">
              <div class="stocks" id="TCG">text</div>
              <div class="stocks" id="AA">text</div>
              <div class="stocks" id="ABF">text</div>
              <div class="stocks" id="STOB">text</div>
              <div class="stocks" id="MCLS">text</div>
              <div class="stocks" id="BA">text</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="jquery-3.1.0.min.js"></script>
  <script src="newindex.js"></script>
</body>

</html>

下面的链接是一个测试服务器，其中的测试页面没有文字

http://motorhomertestsite.ddns.net/newIndex.html

以及添加了文字的下一个链接

http://motorhomertestsite.ddns.net/withText.html

Answer 1

通过从小组课程中删除85％的利润来使其正常工作。在这一部分上可以使用，但是这意味着我将需要为使用该类的页面的其余部分创建一个新类

var test = Orders
    .GroupBy(order => order.OrderName)
    .Any(group => group
        .Where(order => (order.ProductBrand == "B1" && order.ProductUnit > 3) || (order.ProductBrand == "B2" && order.ProductUnit > 3))
        .Select(order => order.ProductBrand)
        .Distinct()
        .Count() == 2);

div框，在放置文本时会在div框内将所有框推出

1 个答案: