Je veux aligner tous les champs verticalement, exactement l'un en dessous de l'autre. Actuellement, tous les champs sont alignés au hasard.J'utilise bootstrap css La mise en page devrait ressembler à ceci:

Label1: Textbox1
Label2: Textbox2

Voici l'extrait de code: Quelle classe puis-je utiliser pour corriger l'alignement de la zone de texte? De l'aide?

<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>
1
beginner 24 janv. 2017 à 10:57

4 réponses

Meilleure réponse

Cette réponse est différente de la réponse ci-dessus donnée par Rafa Romero. J'ai ajouté un style différent pour ceux-ci. Voici les 2 façons dont vous pouvez l'utiliser. Cliquez sur ce lien pour voir l'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>
1
Pavan Baddi 24 janv. 2017 à 11:32

Vous utilisez la classe bootstrap, alors faites une chose, utilisez des colonnes et donnez respectivement .col-sm-8 et .com-sm-4 et check.

<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>
1
Uiupdates 24 janv. 2017 à 08:03
 <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>
2
sneha 24 janv. 2017 à 09:13

Vous pouvez essayer avec absolute position pour les champs de texte et en alignant les deux à la même distance du côté droit ou gauche

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 />
1
Rafa Romero 24 janv. 2017 à 08:11