Question

我想通过bootstrap画一个电视遥控器，但我遇到了一些问题。背景颜色超过，我甚至不知道如何消除它们。请帮我看一下代码，随时给我一些建议！

send( array( 'From' => 'sender@address.com' ) )

@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;
}

Answer 1

实际上不是答案，现在就是这样的样本！

@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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">

    <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>

Answer 2

我检查了你的代码。

首先根据引导程序，我们必须覆盖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>

列背景颜色太多

2 个答案: