Question

我的按钮文字有问题。当我调整大小时，它的文本在某些屏幕尺寸上不再像这些图像那样处于中心位置。

在 iPad 中，它很好

在 iPhone 中，它很丑陋，不是居中位置

HTML

<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12">
    <div @fade class="img-wrapper">
      <img [src]="imgPath" class="img-fluid">
      <div class="img-overlay">
        <button routerLink="/test" 
                class="btn btn-success fill-container testButton">
                TEST
        </button>
      </div>
    </div>
  </div>
</div>

CSS

.img-wrapper {
    position: relative;
}

.img-overlay {
    position: absolute;
    bottom: 31%;
    left: 13.5%;

    width: 34%;
    height: 4%;
    background-color: red;
}

.testButton {
    font-size: 3vw;
    line-height: 20px;
}
.fill-container {
    width: 100%;
    height: 100%;
}

请让我知道我应该做些什么来做正确的事。

此致

Answer 1

解决方案很简单：如果您不尝试通过应用自定义css来阻止本机Bootstrap 4类的工作，那么只需添加text-center类即可。

这是一个代码片段，显示了这个类完美地完成了它的工作：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div @fade class="img-wrapper">
                <img [src]="imgPath" class="img-fluid">
                <div class="img-overlay text-center">
                    <button routerLink="/test" 
                            class="btn btn-success fill-container testButton">
                        TEST
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

但是，如果你开始添加破坏Bootstrap的css hacks，那么，当然，你需要更多的css hacks来修复原始css hacks引起的问题。

在这种情况下，我建议回到原点，删除所有自定义css并使用本机Bootstrap 4类来完成你需要的东西，因为本机Bootstrap 4类几乎可以完成你所需要的所有东西。布局。不需要任何CSS攻击。

如何在bootstrap4或css中的不同屏幕中按钮上的文本

1 个答案: