1. ホーム
  2. 質問と答え
  3. テキストボックスの垂直方向の整列

テキストボックスの垂直方向の整列

2017-01-24 12 views
1

すべてのフィールドを垂直方向に正確に1つ上下に整列させたいとします。私はテキストボックスの配向を固定するために使用できるクラス ：テキストボックスの垂直方向の整列

ここ 
Label1: Textbox1 
Label2: Textbox2

は、コードスニペットです：私はこのようなものである必要があり、レイアウトCSSブートストラップ使用しています現在、すべてのフィールドがランダムに並んでいますか？どんな助け？

<div ng-controller="headerCtrl"> 
    <div class="container" style="background-color:white"> 

     <h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2> 


     <div class="panel-group" id="accordion"> 
      <div class="panel panel-default"> 
       <!--<div class="panel-heading"> 
        <h4 class="panel-title" style="text-align: center"> 


         <a>Add the Headers </a> 
        </h4> 
       </div>--> 

       <div class="panel-body"> 

        <section> 
         <div class="row"> 
          <div class="col-md-4 col-md-offset-4"> 
           <form class="form-inline" style=""> 
            <div class="form-group" style="margin-left:-125px;"> 
             <label for="currentmonth">Total Work days in Current Month:</label> 
            </div> 
            <div class="form-group"> 
             <input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required> 
            </div> 
           </form> 
          </div> 
         </div> 

         <br /> 

         <div class="row"> 
          <div class="col-md-4 col-md-offset-4"> 
           <form class="form-inline" style=""> 
            <div class="form-group"> 
             <label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label> 
            </div> 
            <div class="form-group"> 
             &nbsp;<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> 
            </div> 
           </form> 
          </div> 
         </div> 

         <br /> 

         <div class="row"> 
          <div class="col-md-4 col-md-offset-4"> 
           <form class="form-inline" style=""> 
            <div class="form-group"> 
             <label for="annualeave" style="position:relative;left:-140px;">Sick/Emergency Leave :</label> 
            </div> 
            <div class="form-group"> 
             <input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required> 
            </div> 
           </form> 
          </div> 
         </div> 


         <br /> 

         <div class="row"> 
          <div class="col-md-4 col-md-offset-4"> 
           <form class="form-inline" style=""> 
            <div class="form-group"> 
             <label for="annualeave" style="position:relative;left:-122px;">Total Leave in current month (Annual Leave + Sick/Emergency Leave) :</label> 
            </div> 
            <div class="form-group"> 
             &nbsp;<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required> 
            </div> 
           </form> 
          </div> 
         </div> 

         <br /> 

         <div class="row"> 
          <div class="col-md-4 col-md-offset-4"> 
           <form class="form-inline" style=""> 
            <div class="form-group"> 
             <label for="annualeave" style="position:relative;left:-122px;">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016) :</label> 
            </div> 
            <div class="form-group"> 
             &nbsp;<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required> 
            </div> 
           </form> 
          </div> 
         </div> 


         <br /> 

         <div class="row"> 
          <div class="col-md-4 col-md-offset-4"> 
           <form class="form-inline" style=""> 
            <div class="form-group"> 
             <label for="annualeave" style="position:relative;left:-122px;">Month your name was added in Field Glass :</label> 
            </div> 
            <div class="form-group"> 
             &nbsp;<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required> 
            </div> 
           </form> 
          </div> 
         </div> 

        </section> 



         <div class="pull-right"> 

          <button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button> 

          <button type="clear" class="btn btn-default" ng-click="clear()">Clear</button> 

         </div> 






        </div> 
      </div> 

     </div> 
     <div> 

     </div> 
    </div> 

</div>

出典

2017-01-24 beginner

答えて

1

この回答はラファ・ロメロによって与えられた以上の答えは異なっています。 私はこれらのために異なるスタイルを追加しました。 これを使用できる2つの方法があります。 Click on this link to view image

<section> 
    <div class="row"> 
     <div class="col-md-4 col-md-offset-4"> 
      <form class="form-inline" style=""> 
       <div class="form-group" style="margin-left:-125px;"> 
        <label for="currentmonth">Total Work days in Current Month:</label> 
       </div> 
       <div class="form-group"> 
        <input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required> 
       </div> 
      </form> 
     </div> 
    </div> 

    <br /> 

    <div class="row"> 
     <div class="col-md-4 col-md-offset-4"> 
      <form class="form-inline" style=""> 
       <div class="form-group"> 
        <label for="annualeave">Annual Leave :</label> 
       </div> 
       <div class="form-group"> 
        <input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> 
       </div> 
      </form> 
     </div> 
    </div> 
</section> 

<br><h1 class="text-center">OR</h1><br> 

<section> 
    <div class="row"> 
     <div class="col-md-4 col-md-offset-4"> 
      <form class="form-inline" style=""> 
       <div class="form-group" style="margin-left:-125px;"> 
        <label for="currentmonth">Total Work days in Current Month:</label> 
       </div> 
       <div class="form-group"> 
        <input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required> 
       </div> 
      </form> 
     </div> 
    </div> 

    <br /> 

    <div class="row"> 
     <div class="col-md-4 col-md-offset-4"> 
      <form class="form-inline" style=""> 
       <div class="form-group" > 
        <label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label> 
       </div> 
       <div class="form-group"> 
        <input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> 
       </div> 
      </form> 
     </div> 
    </div> 
</section>

出典

2017-01-24 11:32:23

1

あなたはtexfieldsためabsolute positionで試してみて、あなたは、ブートストラップクラスを使用している

input{ 
 
    position: absolute; 
 
    left: 275px 
 
}
<form class="form-inline" style="margin-left:20px"> 
 
    <div class="form-group"> 
 

 
     <label for="currentmonth">Total Work days in Current Month:</label> 
 
     <input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required> 
 

 
    </div> 
 

 
</form> 
 

 
</div> 
 
<br /> 
 
<div class="row"> 
 

 
    <form class="form-inline" style="margin-left:20px"> 
 
     <div class="form-group"> 
 
      <label for="annualeave">Annual Leave :</label> 
 
      <input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> 
 
     </div> 
 

 
    </form> 
 

 
</div> 
 
<br />

出典

2017-01-24 08:01:48

1

右側または左側から同じ距離の両方を揃えることはとても一つのことを行うことができます列を使用してそれぞれ.col-sm-8と.com-sm-4を付けて確認します。

<div class="form-group"> 
     <label for="annualeave" class="col-sm-8">Annual Leave :</label> 
     <div class="col-sm-4"> 
     <input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> 
     </div> 
</div>

出典

2017-01-24 08:03:47 Uiupdates

2 
<div class="row"> 
      <form> 
       <div class="form-group"> 
        <label class="col-md-4" for="currentmonth">Total Work days in Current Month:</label> 
        <input class="col-md-4" type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required> 
        <div class="col-md-4"></div> 
       </div> 
      </form> 
     </div> 
     <div class="row"> 
      <form> 
       <div class="form-group"> 
        <label class="col-md-4" for="annualeave">Annual Leave :</label> 
        <input class="col-md-4" type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> 
        <div class="col-md-4"></div> 
       </div> 
      </form> 
     </div>

出典

2017-01-24 09:13:25 sneha

関連する問題

 関連する問題