Set background color for div
Question
I have a grid created using bootstrap 3 divs. The collection of divs has 1 button, followed by a radio button, followed by another button. I would like to highlight these with a background color. The background color should not break in between and should be like a single row.
Here is the fiddle with my attempt - https://jsfiddle.net/oxfqvtds/2/
In this, there is some empty space on the bottom right side of the div. As a result, the highlighting is not consistent.
.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>
Also, would like to have the buttons/radio buttons centered in the highlighted area. Right now they seem to be towards the top of the highlighted area.
2 answers
solution1
1 ACCPTED 2017-06-16 17:43:26
With bootstrap you columns should be in a row. Apply the background color to the row once you have it in place. Remove form-groups, and you had class listed twice around the radio element so it wasn't reading the bootstrap column class.
.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>
solution2
0 2017-06-16 17:45:15
从此特定form-group删除页margin-bottom
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.