Question

所以基本上我在网络上做接口并试图正确地对齐所有内容时仍然是一个乞丐。我决定使用bootstrap库。我试图将模态对话框分成多个部分，但我真的很难将一些部分堆叠在一起并且让另一部分占据整个空间。

我现在有什么： https://i.gyazo.com/adeeb3cca0abb6dea4a5d002d3568afa.png

我想要实现的目标： https://i.gyazo.com/e8513c243424cb71926ac838e8b1166e.png

这是我目前的代码，其中有一些示例文本试图分隔每个部分：

<div class='container-fluid'>
  <div class="row">
   <div class="col-md-3" style='border:1px solid black;max-height:5vh;'>
      STATUS
   </div>
   <div class="col-md-9" style='border:1px solid black;min-height:50vh;'>
     L
   </div>
   <div class="col-md-3">
      SOME TEXT ASDASDASDJLASDJKLASDJAD
      ASDASDLASKD
      aASDASDK:ASDKASDK
      ASDASJDASDASDKASJDASDJ
   </div>
   <div class="col-md-9">
     L
   </div>
 </div>
</div>

Answer 1

为了匹配您提供的图像，您需要两列 - 一列三宽四行，一九九宽一行。

左栏中行的高度将由其内容决定。我在左栏中的一行中写了一个额外内容的示例：

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <div class="row">
        3
      </div>
      <div class="row">
        3<br>
        wide<br>
        but<br>
        taller
      </div>
      <div class="row">
        3
      </div>
      <div class="row">
        3
      </div>
    </div>
    <div class="col-sm-9">
      9
    </div>
  </div>
</div>

JSFiddle是一个实例。

Answer 2

您保留两个主要列（3/9），并在第一列内添加更多容器。您还可以向它们添加样式或类。

<div class="container-fluid">
    <div class="row" >
        <div class="col-md-3" style='border:1px solid black;min-height:50vh;'>
            <div style="min-height:10vh">10vh</div>
            <div style="min-height:20vh">10vh</div>
            <div style="min-height:10vh">10vh</div>
            <div style="min-height:10vh">10vh</div>
        </div>

        <div class="col-md-9" style='border:1px solid black;min-height:50vh;'>L</div>
    </div>
</div>

如何使一些boostrap柱比其他更高？

2 个答案: