Question

<form  class="form-horizontal" action="addtodatabase.php" class="form-inline" method="post" enctype="multipart/form-data" >
	<div class="container-fluid">

    
		<fieldset>
		<legend><h5>Security Department User Registration</h5></legend>
		
		<div class="row">
		<div class="col-xs-4 control-group">
			<label class="control-label" for="Firstname">First Name</label>
			<div class="controls">
			<input type="text" class="form-control input-sm" name="firstname" placeholder="Text input"><br/>
			</div>
		</div>
		
		<div class="col-xs-4 control-group">
			<label class="control-label" for="Secondname">Second Name</label>
			<div class="controls">
			<input type="text" class="form-control input-sm"  name="secondname" placeholder="Text input"><br/>
			</div>
		</div>
		
		<div class="col-xs-4 control-group">
			<label class="control-label"for="location">Dpt./Location</label>
			<div class="controls">
			<input type="text" class="form-control input-sm"  name="location"  placeholder="Text input">
			</div>
		</div>
	</div>

In my form I get label at the top and next line field .Since I have used row three of them are in the same row but I want label then followed by field .

现在我无法在水平线First Name,Second Name,Dpt./Location.
中获得该字段
顶部的标签和底部的字段

我有不同长度的标签，我希望它能够正确安排。

我需要做哪些更改

在我的表单中，我希望标签和文本字段都是水平的label to be at right side and followed by text field   我有很多其他领域，但由于标签很长，它们没有正确对齐。

I want all the label both long and short to be aligned properly immediately followed by text field.

我可以看到标签（name和DOB）后面的文字字段是在同一行   这就是我想要做的事情

Answer 1

你想要这样的东西。

看一下示例

＆＃13;

label {
   
    clear:left;
    text-align:right;
    padding-right:10px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form action="addtodatabase.php" class="form-inline" method="post" enctype="multipart/form-data" >
	<div class="container-fluid">

    
		<fieldset>
		<legend><h5>Security Department User Registration</h5></legend>
		
		<div class="row">
		<div class="col-xs-4 form-group">
			<label class="control-label" for="Firstname">First Name
			
			<input type="text" class="form-control input-sm" name="firstname" placeholder="Text input"><br/></label>
		
		</div>
		
		<div class="col-xs-4 form-group">
			<label class="control-label" for="Secondname">Second Name
			
			<input type="text" class="form-control input-sm"  name="secondname" placeholder="Text input"><br/></label>
			</div>
	
		
		<div class="col-xs-4 form-group">
			<label class="control-label"for="location">Dpt./Location
		
			<input type="text" class="form-control input-sm"  name="location"  placeholder="Text input"></label>
			</div>
		</div>

＆＃13;

Answer 2

请检查以下链接，我认为您将找到解决方案。

https://jsfiddle.net/wLxf6cnn/

注意：使视口大于768px宽，以便看到所有表单元素都是内联的，左对齐的，并且标签位于旁边。

<form action="addtodatabase.php" method="post" enctype="multipart/form-data">
      <div class="container-fluid">
        <legend>
          <h5>Security Department User Registration</h5>
        </legend>

        <div class="row form-inline">
          <div class="col-xs-4 form-group">
            <label class="control-label" for="Firstname">First Name
              <input type="text" class="form-control input-sm" name="firstname" placeholder="Text input">
              <br/>
            </label>
          </div>

          <div class="col-xs-4 form-group">
            <label class="control-label" for="Secondname">Second Name
              <input type="text" class="form-control input-sm" name="secondname" placeholder="Text input">
              <br/>
            </label>
          </div>

          <div class="col-xs-4 form-group">
            <label class="control-label" for="location">Dpt./Location
              <input type="text" class="form-control input-sm" name="location" placeholder="Text input">
            </label>
          </div>
        </div>

右对齐标签和浮动文本到左侧，使它们出现在bootstrap中的同一行

2 个答案: