嗨,我有这个屏幕:
而且它需要在手机、平板电脑和台式机上都能看到。使用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>
任何帮助都将不胜感激,谢谢。
https://stackoverflow.com/questions/56386526
复制相似问题