首页 文章

在Bootstrap中调整文本大小以适应图像和屏幕大小

提问于
浏览 次
0

这是我的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 Headers 太小了;和

  • 图像 Headers 都不是在大屏幕/视口上水平居中

我试图直接调整引导类或CSS样式，以便：

  • 图像和 Headers 始终完美居中

  • 在较大的屏幕（台式机/笔记本电脑浏览器）上，图像仅占据屏幕高度的20％

  • 在较小的屏幕（移动设备）上，图像占据屏幕的大部分宽度，可能两边都有几个填充物

  • 在所有情况下， h1 Headers 都会尽量调整文本大小，使其宽度大致与图像的宽度相同

Can anyone see where I'm going awry?

javascript jquery css twitter-bootstrap bootstrap-4

1 回答

  • 1

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

    .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">&nbsp;</div>
</div>
</body>
</html>
    回复于

相关问题