Question

嗨，我有这个屏幕：

它需要在手机，平板电脑和台式机上可见。使用BootStrap 4

我想要的是每个按钮的最大宽度以及按钮在屏幕上居中的位置。

这是我的html / css：

<!DOCTYPE html>
<html lang="en">

<head>
<title>Cacophonator Setup</title>
<meta charset="utf-8">
<meta name="viewport" content="max-width=device-max-width, initial-scale=1">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<style> a { max-width: 400px; } </style>
</head>

<body>
{{template "navbar"}}

<div class="container">
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/camera" role="button">Camera</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/disk-memory" role="button">Disk &amp; Memory</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/network" role="button">Network</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/wifi-networks" role="button">WiFi Networks</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/speaker" role="button">Speaker Test</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/location" role="button">Location</a>
            </div>
        </div>

</div>

<script src="/static/js/jquery-3.3.1.slim.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>

<script>
    $(document).ready(function(){
        $("#btnBack").hide();
    });
</script>

非常感谢您的帮助。

Answer 1

只需添加以下样式：

<style> 
.row div{ 
    display: flex; 
    justify-content: center; 
} 

.btn-block{
    max-width: 400px;
}
</style>

结果：

<head>
<title>Cacophonator Setup</title>
<meta charset="utf-8">
<meta name="viewport" content="max-width=device-max-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style> 
.row div{ 
  display: flex; 
  justify-content: center; 
} 

.btn-block{
  max-width: 400px;
}
</style>
</head>

<body>
{{template "navbar"}}

<div class="container">
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/camera" role="button">Camera</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/disk-memory" role="button">Disk &amp; Memory</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/network" role="button">Network</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/wifi-networks" role="button">WiFi Networks</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/speaker" role="button">Speaker Test</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/location" role="button">Location</a>
            </div>
        </div>

</div>

<script src="/static/js/jquery-3.3.1.slim.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>

Answer 2

.container {
position : absolute;
left : 50%;
top :50%;
transform : translate(-50%,-50%);
}

带有Bootstrap 4的居中按钮

2 个答案: