Question

我有一个<div>元素，该元素的大小在in中（它是为明信片建模的，因此尺寸必须与实体卡匹配）。为了显示，我使用transform: scale(0.5);或类似的方法将这些元素缩小。效果很好，但是当尝试并排显示其中两个时，即使其中的元素应并排适合列的最大宽度，bootstrap也会将列堆叠在一起。

我在这里有一个JSFiddle：https://jsfiddle.net/g5jnfz9u/9/。我希望在移动设备上会出现这种情况，但是即使在高分辨率显示器上以全屏显示时，它们仍然会垂直显示。在检查实际的col元素时，由于某种原因，我可以看到它比其中的内容宽得多。

Answer 1

尝试如下定义col类div：

我认为因为您正在扩展div，这可能会影响'col'的工作方式，或者您使用的引导程序版本不支持使用'col'

Answer 2

发生了一些事情。这里有一个更新的示例：https://jsfiddle.net/43ez7c0x/

第一：使用网格类时。 container，row，col。通常最好不要覆盖您自己的样式，因为这会干扰引导网格系统样式。 https://getbootstrap.com/docs/4.3/layout/grid/

第二：如果您将col中的项目设置为具有一定宽度，则网格将尝试遵守该宽度。例如如果您设置为5.14in，则会将其设置为最小宽度。

Answer 3

您要实现的目标是与 zoom 更加相似的行为：

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  display: inline-block;
  border: solid 1px #6c757d;
  padding: 10px;
}

.some-box {
  width: 6.25in;
  height: 4.25in;
  margin: 0;
  padding: 0;
  background-size: 6.25in 4.25in;
  background-color: black;
}

.scale-down {
  zoom: 0.5;
  display: inline-block;
  border: solid 3px red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">
      <div class="scale-down">
        <div class="some-box"></div>
      </div>
    </div>
    <div class="col">
      <div class="scale-down">
        <div class="some-box"></div>
      </div>
    </div>
  </div> 
</div>

非标准zoom CSS属性可用于控制元素的放大级别。 transform：如果可能，应使用scale（）代替此属性。但是，与CSS转换不同，缩放会影响元素的布局大小。

— https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

引导程序为何将这些缩放的元素垂直堆叠在列中？

3 个答案: