Question

我正在尝试创建一个3列的引导网格，在中间的列中有一个SVG，以这种方式快速填充它的div：

<div class="container-fluid h-100 p-0 bg-warning">
  <div class="row no-gutters h-25">
    <div class="col-sm-3 bg-info">Left</div>
    <div class="col-sm-6 bg-success">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
        <rect width="100" height="100" fill="Blue"></rect>
      </svg>
    </div>
    <div class="col-sm-3 bg-info">Right</div>
  </div>
</div>

SVG溢出并扩展了div。我读到这是因为divs高度设置为100％，并且没有赋予SVG的高度。

我尝试将SVG包装在高度为25vh的div中：

http://jsfiddle.net/dqk14e98/

  <div class="container-fluid h-100 p-0 bg-warning">
    <div class="row no-gutters h-25">
      <div class="col-sm-3 bg-info">Left</div>
      <div class="col-sm-6 bg-success">
        <div style="height:25vh">
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
            <rect width="100" height="100" fill="Blue"></rect>
          </svg>
        </div>
      </div>
      <div class="col-sm-3 bg-info">Right</div>
    </div>
  </div>

这似乎给了我正确的行为。这是最好的方法吗？在不使用硬编码像素值的情况下编写此文字的正确方法是什么？

SVG填充div的响应式引导网格

0 个答案: