html - 尝试用 bootsrtap 制作 16 个方块但它不起作用,我不知道为什么
问题描述
我正在尝试使用引导程序在我的网站上制作 16 个方块,但它不起作用,我不知道为什么。我使用“col-xs-3”但它没有设置宽度,请帮忙。
PS(当然我可以在 CSS 中设置宽度,但我不应该这样做)
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="resources/css/reset.css">
<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">
<link rel="stylesheet" href="resources/css/style.css">
<title>Match Game</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="gameInstructions col-sm-12 col-md-3">
<h1>Match Game</h1>
<h2>Rules</h2>
<p>Click on a card to reveal the number on the other side. Click on a second card to try and find a match to the first. If you succeed, the pair will be removed from play. If not, try again!</p>
<h2>How To Win</h2>
<p>You win when all pairs have been found.</p>
</div>
<div id="game"class="col-sm-12 col-md-9">
<div class="row">
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
<div class="col-xs-3 card"></div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="./resources/js/match-game.js"></script>
<script type="text/javascript" src="./resources/js/tests.js"></script>
</body>
</html>
/*"Work Sans" Font*/
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
src: local('Work Sans'), local('WorkSans-Regular'), url(https://fonts.gstatic.com/s/worksans/v5/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 700;
src: local('Work Sans Bold'), local('WorkSans-Bold'), url(https://fonts.gstatic.com/s/worksans/v5/QGYpz_wNahGAdqQ43Rh3x4X8mNhN.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 900;
src: local('Work Sans Black'), local('WorkSans-Black'), url(https://fonts.gstatic.com/s/worksans/v5/QGYpz_wNahGAdqQ43Rh3_4f8mNhN.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*Universal Styling*/
html{
font-size: 14px;
}
body{
font-family: "Work Sans", sans-serif;
background-color: rgb(255,242,242);
padding-top: 5.25rem;
}
p{
color: rgb(74, 74, 74);
}
h1{
font-weight: bold;
font-size: 2.5rem;
color: rgb(32, 64, 86);
}
h2{
font-weight: bold;
font-size: 1rem;
}
/*Specified Styling*/
.card{
height: 12.5rem;
background-color: rgb(153, 153, 153);
border: 4px solid #fff;
border-radius: 8px;
}
预期的输出将是 16 个正方形,每个正方形的宽度为 25%,高度为 12.5rem
解决方案
如果您希望您的 16 个框在一行内具有相同的宽度,请在 calc 中提供宽度:
.card{
width: calc(100% / 16)
height: 12.5rem;
background-color: rgb(153, 153, 153);
border: 4px solid #fff;
border-radius: 8px;
}
推荐阅读
- php - 如何从变量上的 curl 请求中存储我的 cookie
- sql - 需要查看子查询的合并输出
- html - 使用“.map”获取选项时如何修复选择的默认值?
- r - R data.table:引用外部分配列名的数据表列
- sql - 数据库迁移 - 旧数据库到新定义的数据库
- typescript - rxjs:地图添加字段
- arrays - 在 Azure 数据工厂中将 JSON 文件从平面数组转换为嵌套数组
- javascript - 如何防止 HTML 的默认值
- angular - 角度中的 Observable 未能订阅构造函数或 ngOnInit()
- swift - 用于多个文本字段的 XCUITest 键盘未隐藏或键盘未集中在第二个文本字段上