爲div設置背景顏色

我有一個使用bootstrap 3 div創建的網格。 div的集合有1個按鈕，後面跟着一個單選按鈕，後面跟着另一個按鈕。我想用背景色來突出這些。背景顏色不應該介於兩者之間，應該像單行一樣。爲div設置背景顏色

下面是我嘗試的小提琴 - https://jsfiddle.net/oxfqvtds/2/

在此，對股利的右下方一些空的空間。因此，突出顯示不一致。

.highlight { 
 
    background-color: yellow; 
 
} 
 

 
.input-field { 
 
    height: 20px; 
 
    padding: 2px 10px; 
 
} 
 

 
.custom-label { 
 
    line-height: 3.3em !important; 
 
} 
 

 
.label-size { 
 
    font-size: 10px; 
 
    line-height: 2.1em; 
 
} 
 

 
label { 
 
    padding-right: 0px; 
 
}

<head> 
 
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
</head> 
 
<body> 
 
    <div class="container-fluid"> 
 

 
    <form class="form-horizontal"> 
 
     <div class="col-md-12">...</div> 
 
     <div class="col-md-12">...</div> 
 
     <div class="col-md-10 highlight"> 
 
     <div class="form-group"> 
 
      <div class="col-md-3"> 
 
      <button class="btn btn-primary btn-xs" type="button">Test</button> 
 

 
      </div> 
 

 
      <label class="col-md-2 label-size">Options</label> 
 

 
      <div class="radio" class="col-md-7 label-size"> 
 
      <label class="label-size"> 
 
      <input type="radio" name="opt" value="opt" >opt</label> 
 

 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-2 highlight form-group"> 
 

 
     <button class="btn btn-info btn-xs pull-right">Test2</button> 
 

 
     </div> 
 
    </form> 
 
    </div> 
 
</body>

另外，希望有在突出顯示的區域爲中心的按鈕/單選按鈕。現在他們似乎正朝着突出顯示的區域的頂部。

來源

2017-06-16 kayasa

的margin-bottom只要把類''亮點容器中的流體DIV – Chiller

有了引導程序，你的列應該是連續的。一旦有了它，將背景顏色應用到行中。刪除表單組，並且你有班級在radio元素周圍列出兩次，所以它不讀取引導列類。

.highlight.row { 
 
    background-color: yellow; 
 
    margin:0; 
 
} 
 

 
.input-field { 
 
    height: 20px; 
 
    padding: 2px 10px; 
 
} 
 

 
.custom-label { 
 
    line-height: 3.3em !important; 
 
} 
 

 
.label-size { 
 
    font-size: 10px; 
 
    line-height: 2.1em; 
 
} 
 

 
label { 
 
    padding-right: 0px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
<div class="row highlight"> 
 
    <form class="form-horizontal"> 
 

 
    <div class="col-md-10 "> 
 
     <div class=""> 
 
     <div class="col-md-3"> 
 
      <button class="btn btn-primary btn-xs" type="button">Test</button> 
 

 
     </div> 
 
     <div class="col-md-2"> 
 
     <label class="label-size">Options</label> 
 
     </div> 
 
     
 
     
 

 
     <div class="col-md-5 label-size"> 
 
      <label class="label-size"> 
 
      <input type="radio" name="opt" value="opt" >opt</label> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-2"> 
 

 
     <button class="btn btn-info btn-xs pull-right">Test2</button> 
 

 
    </div> 
 
    </form> 
 
    </div> 
 
</div>

來源

2017-06-16 17:43:26

這具有幾乎相同的效果爲好。 – kayasa

用代碼編輯它，再次檢查 –

非常感謝你，這是訣竅。一個跟進問題。突出顯示的行觸及瀏覽器的左右兩端，如何在左側和右側獲得一點間隙，以便突出顯示的行像瀏覽器中的一個框，而不是從極左到極右。 – kayasa

移除這個特殊form-group

來源

2017-06-16 17:45:15 Rafael

爲div設置背景顏色

回答

相關問題