Bootstrap 页面标签和文本框的对齐方式

rkkpypqq 于 2022-12-28 发布在 Bootstrap

关注(0)|答案(4)|浏览(202)

我想垂直对齐所有的字段，这是确切的一个在另一个之下。目前所有的字段都是随机对齐的，我正在使用bootstrap css的布局应该是这样的东西：

Label1: Textbox1
Label2: Textbox2

下面是代码片段：我可以用哪个类来修正文本框的对齐方式？有帮助吗？

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/41843785/alignment-of-label-and-textbox-for-my-page

4条答案

按热度按时间

svdrlsy41#

你的标签太长了，我刚把结构改成了居中对齐，这是你需要的吗？

.form-group {
	width:50%;
	float:left;
	padding:0 15px;
}
.form-group input {
	float:left;
}
.form-group label {
	float:right;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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-xs-12">
                <form class="form-inline" style="">
                  <div class="form-group" >
                    <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-xs-12">
                <form class="form-inline" style="">
                  <div class="form-group">
                    <label for="annualeave" >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-xs-12">
                <form class="form-inline" style="">
                  <div class="form-group">
                    <label for="annualeave">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-xs-12">
                <form class="form-inline" style="">
                  <div class="form-group">
                    <label for="annualeave" >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-xs-12">
                <form class="form-inline" style="">
                  <div class="form-group">
                    <label for="annualeave" >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-xs-12">
                <form class="form-inline" style="">
                  <div class="form-group">
                    <label for="annualeave" >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>

赞(0）回复(0）举报 2022-12-28

rggaifut2#

我已经删除了你所有的内联样式。没有必要对每个字段都进行样式化。你可以用引导类来做。

<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-body">
                <section>
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-6 control-label" for="currentmonth">Total Work days in Current Month:</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required/> </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-6 control-label" for="annualeave">Annual Leave :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-6 control-label" for="annualeave">Sick / Emergency Leave :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required/> </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-6 control-label" for="annualeave">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required/> </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-6 control-label" for="annualeave">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016):</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required/> </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-6 control-label" for="annualeave">Month your name was added in Field Glass :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required/> </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-6 control-label"></label>
                                    <div class="col-sm-6 text-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>
                </section>
            </div>
        </div>
    </div>
</div>

赞(0）回复(0）举报 2022-12-28

ccgok5k53#

将类form-inline添加到form元素示例中：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Vertical (basic) form</h2>
  <form class="form-inline">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

</body>
</html>

参考：http://www.w3schools.com/bootstrap/bootstrap_forms.asp

赞(0）回复(0）举报 2022-12-28

juzqafwq4#

从form标记中删除form-inline类。

赞(0）回复(0）举报 2022-12-28