Set Hintergrundfarbe für div

Ich habe ein Raster mit Bootstrap 3 divs erstellt. Die Sammlung von divs hat 1 Schaltfläche, gefolgt von einem Optionsfeld, gefolgt von einer anderen Schaltfläche. Ich möchte diese mit einer Hintergrundfarbe hervorheben. Die Hintergrundfarbe sollte nicht dazwischen liegen und sollte wie eine einzelne Zeile sein.Set Hintergrundfarbe für div

Hier ist die Geige mit meinem Versuch ist - https://jsfiddle.net/oxfqvtds/2/

In diesem gibt es einige leere Raum auf der rechten unteren Seite des Div. Daher ist die Hervorhebung nicht konsistent.

.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>

Auch würde, wie die Tasten/Radio-Buttons in dem markierten Bereich zentriert haben. Im Moment scheinen sie sich in Richtung des markierten Bereichs zu befinden.

Quelle

2017-06-16 kayasa

einfach die Klasse '' Highlight in dem Behälter-Flüssigkeit div setzen – Chiller

Mit Bootstrap sollten Sie Spalten in einer Zeile sein. Wenden Sie die Hintergrundfarbe auf die Zeile an, sobald Sie sie an Ort und Stelle haben. Entfernen Sie Formulargruppen, und Sie haben die Klasse zweimal um das Radioelement aufgelistet, sodass die Bootstrapspaltenklasse nicht gelesen wurde.

.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>

Quelle

2017-06-16 17:43:26

das auch so ziemlich die gleiche Wirkung hat. – kayasa

Bearbeitet es mit Code, überprüfen Sie erneut –

Vielen Dank, das macht den Trick. Eine Folgefrage. Die hervorgehobene Zeile berührt sowohl das linke als auch das rechte Ende des Browsers. Wie kann ich links und rechts etwas Lücke bekommen, so dass die hervorgehobene Zeile wie eine Box im Browser sitzt und nicht von ganz links nach ganz rechts geht. – kayasa

entfernen Sie die margin-bottom von diesem besonderen form-group

Quelle

2017-06-16 17:45:15 Rafael

Set Hintergrundfarbe für div

Antwort

Verwandte Themen