Question

这是我的SSCCE的jsFiddle link，但我的代码的要点如下。我正在使用Twitter Bootstrap 4.0制作一个简单的页面：

<!DOCTYPE HTML>
<html>
<head>
    <title>FooBar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container text-center mx-auto">
    <div class="col-lg-12 col-sm-12 well-lg">
        <img src="https://s3.amazonaws.com/smeeb-public-images/foobar.png" class="img-fluid mx-auto img-rounded" alt="FooBar logo" />
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">
        <h1 style="color: rgb(0, 170, 236); font-size: 40px;">FOOBAR</h1>
    </div>
    <div class="col-lg-12 col-sm-12 well-lg alert alert-danger">
        <strong>Oops!</strong> Something went wrong!
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">
        <button type="button" class="btn btn-primary btn-lg">Sign In</button>
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">&nbsp;</div>
</div>
</body>
</html>

正如您在jsFiddle中所看到的，有几个明显的问题：

图片方式太大;和
图片下的h1标题 way 太小;和
图像+标题都不是在大屏幕/视口上水平居中

我正在尝试直接调整bootstrap类或CSS样式，以便：

图像和标题总是完全居中
在较大的屏幕（桌面/笔记本电脑浏览器）上，图像仅占据屏幕高度+宽度的20％
在较小的屏幕（移动设备）上，图像占据了屏幕的大部分宽度，可能两边都有几个填充
在所有情况下，h1标题都会尽量调整文本大小以使其宽度与图像的宽度大致相同

谁能看到我出错的地方？

Answer 1

以下是您可能会做的一个示例。显然，样式的细节取决于您的确切偏好。

＆＃13;

.well-lg img{
  width:20%;
}

body{
  display:flex;
  justify-content:center;
}



@media screen and (max-width:468px){
  .well-lg img{
    width:80%;
  }
  .well-lg h1{
    font-size:4em !important;
}
}

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
    <title>FooBar</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container text-center mx-auto">
    <div class="col-lg-12 col-sm-12 well-lg">
        <img src="https://s3.amazonaws.com/smeeb-public-images/foobar.png" class="img-fluid mx-auto img-rounded" alt="FooBar logo" />
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">
        <h1 style="color: rgb(0, 170, 236); font-size: 40px;">FOOBAR</h1>
    </div>
    <div class="col-lg-12 col-sm-12 well-lg alert alert-danger">
        <strong>Oops!</strong> Something went wrong!
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">
        <button type="button" class="btn btn-primary btn-lg">Sign In</button>
    </div>
    <div class="col-lg-12 col-sm-12 well-lg">&nbsp;</div>
</div>
</body>
</html>

＆＃13;

使文字大小适应图像＆amp; Bootstrap中的屏幕大小

1 个答案: