这是一个jsFiddle link到我的 SSCCE，但我的代码要点如下。我正在使用 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"> </div>
</div>
</body>
</html>
正如您在 jsFiddle 中看到的，有几个明显的问题:
- 图片太大；和
- 图片下方的
h1标题太小了；和 - 图片和标题都没有在大屏幕/视口(viewport)上水平居中
我正在尝试直接调整 Bootstrap 类或 CSS 样式，以便:
- 图片和标题始终完美居中
- 在较大的屏幕(台式机/笔记本电脑浏览器)上，图像仅占据屏幕高度和宽度的 20%
- 在较小的屏幕(移动设备)上，图像占据了屏幕的大部分宽度，两边可能有几%的填充
- 在所有情况下，
h1标题都会尽力调整文本的大小，使其宽度或多或少与图像的宽度相同
谁能看出我哪里出错了？
最佳答案
以下是您可以执行的操作的示例。显然，样式的细节完全取决于您的喜好。
.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;
}
}<!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"> </div>
</div>
</body>
</html>关于javascript - 在 Bootstrap 中使文本大小适应图像和屏幕大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49149649/