代码之家 › 专栏 › 技术社区 › Sam

引导4和CSS转换旋转

bootstrap-4 flexbox css

-1

Sam · 技术社区 · 7 年前

我想做一个旁边有线条的钻石。当它是一个正方形的时候就可以用,但是当我申请的时候 transform: rotation(45deg); 在广场上,两条线正穿过钻石。

https://jsfiddle.net/0kty2fLw/

3 回复 | 直到 7 年前

t-jam 7 年前

CSS转换不会影响任何其他元素的位置。在应用任何CSS转换之前设置所有元素的初始大小和位置,然后应用CSS转换,仅影响转换的元素。这意味着,当你的正方形旋转45度时,每边的线条仍然与旋转前的长度相同。转换后,旋转的正方形现在比旋转前更宽,因此线条与“菱形”的左右点重叠。

处理这一问题的最快方法是在正方形上设置背景色(白色可以与示例配合使用),以覆盖线条,并确保线条设置为 z-index 在旋转的正方形后面。或者,如果需要正方形/菱形透明,可以使用左右边距减少线条宽度,以防止重叠。

另一方面,您的引导结构不正确:您不应该 .container 里面 容器 . 我也会避免为类似的事情使用引导网格元素。它给HTML增加了不必要的结构复杂性,这应该更简单。如果你需要这个来适应一个引导布局,我只需要在一个全宽内做整行/菱形设计。 .col 独立处理大小和响应。

Yoarthur 7 年前

编辑

检查这个。

#ligne1{
    margin-right: -5vw;
}

#ligne2{
    margin-left: -5vw;
}

它将保持灵敏的设计

user1403588 7 年前

只需增加左边距和右边距。这是J小提琴: https://jsfiddle.net/0kty2fLw/4/

#ligne1{
  margin-right: 35px;
}

#ligne2{
  margin-left: 35px;
}

移除Col-2类

<div class="container">
<div class="row ">
  <div class="ligne col my-auto" id="ligne1"></div>
  <div>
    <div class="container">
      <div class="row justify-content-center">
        <div class="square my-auto">
          <div class="circle">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ligne col my-auto" id="ligne2"></div>
</div>