我如何在引导程序中旋转段落

Posted 2023-03-04

【中文标题】我如何在引导程序中旋转段落

【英文标题】：how do i rotate a paragraph in bootstrap

【发布时间】：2022-01-24 02:38:10

【问题描述】：

我正在尝试将此 div 旋转 90 度，但它似乎不起作用。没有引导类来做这件事，css 也没有做任何事情

#socials 
  transform: rotate(90deg);

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section>
  <div class="container-fluid">
    <svg class="svgOne position-absolute bottom-0 start-1"   viewBox="0 0 13 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect   fill="black"/>
    </svg>
    <svg class="svgTwo position-absolute top-2 start-1"   viewBox="0 0 13 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect   fill="black"/>
    </svg>
    <div class="fs-4 text-light" id="socials">Socials</div>
  </div>
</section>

这是一张图片： enter image description here

【参考方案1】：

对我来说看起来不错，但是如果您想要黑色 svg 区域内的文本，您的变换原点似乎关闭了。我更改了 html/body 颜色只是为了让您看得更清楚。

#socials 
  transform: rotate(90deg);
  transform-origin: bottom left;

html, body  background-color: #333; 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section>
  <div class="container-fluid">
    <svg class="svgOne position-absolute bottom-0 start-1"   viewBox="0 0 13 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect   fill="black"/>
    </svg>
    <svg class="svgTwo position-absolute top-2 start-1"   viewBox="0 0 13 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect   fill="black"/>
    </svg>
    <div class="fs-4 text-light" id="socials">Socials</div>
  </div>
</section>

【讨论】：

我添加的正是你所做的，但什么也没发生

@memento 然后您需要发布一个可重现的问题，因为根据您告诉我们的内容和您发布的内容，我们无法提供帮助，因为它对我们来说很好。

【参考方案2】：

#socials 
  transform: rotate(-90deg);

<section>
  <div class="container-fluid" id="socials">
    <svg class="svgOne position-absolute bottom-0 start-1"   viewBox="0 0 13 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect   fill="black"/>
    </svg>
 <div class="fs-4 text-light" >Socials</div>
    <svg class="svgTwo position-absolute top-2 start-1"   viewBox="0 0 13 100" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect   fill="black"/>
    </svg>
   
  </div>
</section>

【讨论】：

我只是把它改成负数：-90deg

对不起，但这什么也没做:(

【参考方案3】：

它适用于我兄弟，只是尝试添加前缀可能你的浏览器不支持它或类似的东西。

   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   transform: rotate(90deg);

如果这种情况仍然发生，请在其他浏览器中尝试。