2017-11-23 2 views
0

Ich benutze Bootstrap im Moment und ich habe Mühe, die Eingabe neben dem Etikett zu bekommen. HierEingabe neben dem Label

ist die HTML:

 <main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2"> 
     <h1>Title</h1> 

     <div class="row"> 
     <div class="col-md-12"> 
      <div class="panel panel-default"> 
      <div class="panel-heading">     
       <h3 class="panel-title">Title Info</h3> 
       <a href="#"><button type="button" class="btn btn-primary-panel-titles" aria-label="Left Align">Edit</button></a></div> 


       <div class="panel-body"> 
       <div class="form-group"> 
        <label class="control-label" for="year">Year</label> 
        <input name="site" disabled="disabled" class="form-control" type="text" value="2017/18 - 2017/18"> 
        </div> 

       <strong>Payment Times: </strong> <div class="input-group col-md-2"> 
        <input type="text" class="form-control" placeholder="Monthly" aria-describedby="basic-addon1" readonly="readonly"> 
       </div> 
       <br></br> 
       <strong>Payment Type: </strong> Direct Debit 
      </div> 

      </div>    
     </div> 

Hier ist ein Bild, wie es aussieht derzeit: Imgur Image

Antwort

-1

Verwenden Etikett ohne Klassen. entfernen Steuer Etikett

0

Entweder verwenden:

<label class="control-label" for="year">Year</label> 
<input name="site" style="width:calc(***'initial', '100%', or specific amount*** - 4em);" disabled="disabled" class="form-control" type="text" value="2017/18 - 2017/18"> 

oder dies:

<label class="control-label" style="display:inline-block;width:calc(100% - ***PIXEL AMOUNT HERE***px);" for="year">Year</label> 
<input name="site" style="width:calc(100% - ***PIXEL AMOUNT HERE***px);" disabled="disabled" class="form-control" type="text" value="2017/18 - 2017/18"> 
0

ausprobieren Bootstraps form-horizontal -Klasse. Sie würden es gerne nutzen:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2"> 
 
    <h1>Title</h1> 
 

 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
      <div class="panel panel-default"> 
 
       <div class="panel-heading"> 
 
        <h3 class="panel-title">Title Info</h3> 
 
        <a href="#"> 
 
         <button type="button" class="btn btn-primary-panel-titles" aria-label="Left Align">Edit</button> 
 
        </a> 
 
       </div> 
 

 
       <div class="panel-body"> 
 
        <form class="form-horizontal"> 
 
         <div class="row"> 
 
          <div class="col-sm-12"> 
 
           <div class="form-group"> 
 
            <label for="year" class="control-label col-xs-3">Year:</label> 
 
            <div class="col-xs-9"> 
 
             <input name="site" disabled="disabled" class="form-control" type="text" value="2017/18 - 2017/18"> 
 
            </div> 
 
           </div> 
 
          </div> 
 
          <div class="col-sm-12"> 
 
           <div class="form-group"> 
 
            <label class="control-label col-xs-3">Payment Times:</label> 
 
            <div class="col-xs-9"> 
 
             <input type="text" class="form-control" placeholder="Monthly" aria-describedby="basic-addon1" readonly="readonly"> 
 
            </div> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </form> 
 
       </div> 
 
       <br/> 
 
       <br/> 
 
       <strong>Payment Type: </strong> Direct Debit 
 
      </div> 
 
     </div> 
 
    </div>

Werfen Sie einen Blick here für weitere Beispiele.

Verwandte Themen