Bootstrap 4中的居中按钮
Bootstrap 4中的居中按钮
提问于 2019-05-31 06:41:34
嗨，我有这个屏幕：
而且它需要在手机、平板电脑和台式机上都能看到。使用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 & 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>
任何帮助都将不胜感激，谢谢。
回答 1
Stack Overflow用户
发布于 2019-05-31 06:54:41
.container {
position : absolute;
left : 50%;
top :50%;
transform : translate(-50%,-50%);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56386526
复制相关文章
相似问题