Question

我正在尝试在屏幕的左边缘放置一个垂直引导按钮。现在我有了这个CSS：

#button1 {
  position: absolute !important;
  z-index: 10 !important;
  left: 0px !important;
  bottom: 20% !important;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<button id="button1" class="btn btn-lg btn-danger">Click to toggle popover</button>

问题在于它并非一直在左侧；可能是它没有旋转，但是既然已经旋转了，那么就会有一定的空隙。我该如何解决？

Answer 1

将transform-origin: bottom left;添加到您的按钮

#button1 {
  position: absolute !important;
  z-index: 10 !important;
  left: 0px !important;
  bottom: 20% !important;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform-origin: bottom left;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<button id="button1" class="btn btn-lg btn-danger">Click to toggle popover</button>

希望这会有所帮助：）

要详细了解transform-origin属性，请访问 https://www.w3schools.com/cssref/css3_pr_transform-origin.asp

Answer 2

您可以将按钮保持在span内，并手动设置width中的span，将其粘贴到屏幕左侧。这是工作代码：

#button1 {
  position: absolute !important;
  z-index: 10 !important;
  left: 0px !important;
  bottom: 35% !important;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  width: 45px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<span id="button1">
  <button class="btn btn-lg btn-danger">Click to toggle popover</button>
</span>

在左侧边缘放置一个垂直引导按钮

2 个答案: