我想通过 Bootstrap 绘制一个电视 Remote ，但我遇到了一些问题。 背景颜色超出，我什至不知道如何消除它们。 请帮我看看代码，随时给我一些建议!
@media screen and (min-width: 1200px) {
.btn-circle {
width : 90px;
height: 90px;
text-align: center;
padding: 0;
font-size: 30px;
border-radius: 70px;
}
}
@media screen and (min-width: 980px) and (max-width: 1200px) {
.btn-circle {
width : 82px;
height: 82px;
text-align: center;
padding: 0;
font-size: 25px;
border-radius: 70px;
}
}
@media screen and (min-width: 768px) and (max-width: 979px) {
.btn-circle {
width : 62px;
height: 62px;
text-align: center;
padding: 0;
font-size: 20px;
border-radius: 40px;
}
}
@media screen and (max-width: 767px) {
.btn-circle {
width : 32px;
height: 32px;
text-align: center;
padding: 0;
font-size: 12px;
border-radius: 40px;
}
}
.row {
background-color: black;
}
#btn_key_f1 {
background-color: green;
color: #FFFFFF;
}
#btn_key_f2 {
background-color: blue;
color: #FFFFFF;
}
#btn_key_f3 {
background-color: red;
color: #FFFFFF;
}
#btn_key_f4 {
background-color: yellow;
color: #000000;
}
#btn_key_1 {
background-color: #666666;
color: #FFFFFF;
}
#btn_key_3 {
background-color: #666666;
color: #FFFFFF;
}
#btn_key_5 {
background-color: #666666;
color: #FFFFFF;
}
#btn_key_7 {
background-color: #666666;
color: #FFFFFF;
}
#btn_key_9 {
background-color: #666666;
color: #FFFFFF;
}
#btn_key_on {
background-color: #666666;
color: #FFFFFF;
}
#btn_key_off {
background-color: #666666;
color: #FFFFFF;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="remote.css">
</head>
<body>
<div class="col-xs-offset-4 col-xs-5 col-sm-6 col-md-4 col-lg-offset-5 col-lg-3" id="shadow">
<div class="row_outermost">
<div class="row" id="row_1">
<div class="col-xs-1 col-sm-2 col-md-1 col-lg-3 keypad">
<button type="button" id="btn_key_on" class="btn btn-circle btn-default" data-keycode="116">
<span class="glyphicon glyphicon-off"></span>
<!-- On -->
</button>
</div>
<div class="col-xs-1 col-sm-2 col-md-5 col-lg-3 keypad">
<!-- Empty1 -->
</div>
<div class="col-xs-1 col-sm-2 col-md-1 col-lg-3 keypad">
<button type="button" id="btn_key_off" class="btn btn-circle btn-default" data-keycode="142">
Off
<!-- Off -->
</button>
</div>
</div>
<div class="row" id="row_2">
<div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
<button type="button" id="btn_key_1" class="btn btn-circle btn-default" data-keycode="">
<span class="glyphicon glyphicon-plus"></span>
<!-- PageUp-->
</button>
</div>
<div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
<button type="button" id="btn_key_2" class="btn btn-circle btn-default" data-keycode="103">
<span class="glyphicon glyphicon-menu-up"></span>
<!-- Up -->
</button>
</div>
<div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
<button type="button" id="btn_key_3" class="btn btn-circle btn-default" data-keycode="14">
<span class="glyphicon glyphicon-repeat"></span>
<!-- BackSpace -->
</button>
</div>
</div>
<div class="row" id="row_3">
<div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
<button type="button" id="btn_key_4" class="btn btn-circle btn-default" data-keycode="105">
<span class="glyphicon glyphicon-menu-left"></span>
<!-- Left -->
</button>
</div>
<div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
<button type="button" id="btn_key_5" class="btn btn-circle btn-default" data-keycode="28">
Ok
<!-- OK -->
</button>
</div>
<div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
<button type="button" id="btn_key_6" class="btn btn-circle btn-default" data-keycode="106">
<span class="glyphicon glyphicon-menu-right"></span>
<!-- Right -->
</button>
</div>
</div>
<div class="row" id="row_4">
<div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
<button type="button" id="btn_key_7" class="btn btn-circle btn-default" data-keycode="109">
<span class="glyphicon glyphicon-minus"></span>
<!-- PageDown-->
</button>
</div>
<div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
<button type="button" id="btn_key_8" class="btn btn-circle btn-default" data-keycode="108">
<span class="glyphicon glyphicon-menu-down"></span>
<!-- Down -->
</button>
</div>
<div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
<button type="button" id="btn_key_9" class="btn btn-circle btn-default" data-keycode="1">
<span class="glyphicon glyphicon-share"></span>
<!-- ESC -->
</button>
</div>
</div>
<div class="row" id="row_5">
<div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
<button type="button" id="btn_key_f1" class="btn btn-circle btn-default keypad-btn" data-keycode="59">
F1
</button>
</div>
<div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
<button type="button" id="btn_key_f2" class="btn btn-circle btn-default keypad-btn" data-keycode="60">
F2
</button>
</div>
<div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
<button type="button" id="btn_key_f3" class="btn btn-circle btn-default keypad-btn" data-keycode="61">
F3
</button>
</div>
</div>
<div class="row" id="row_6">
<div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
<!-- Empty2-->
</div>
<div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
<button type="button" id="btn_key_f4" class="btn btn-circle btn-default keypad-btn" data-keycode="62">
F4
</button>
</div>
</div>
</div>
</div>
</body>
</html>最佳答案
我检查了你的代码。
首先根据bootstrap，我们必须覆盖12列，然后只有所有元素覆盖背景。
按照此操作即可正常工作。
<div class="row" style="background-color:black;">
<div class="col-lg-offset-1 col-lg-10">
<div class="">
<!-- then you have to put here of each col-lg-4 -->
</div>
</div>
<div class="col-lg-offset-1"></div>
</div>
关于html - 列背景颜色太多，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34353373/