如何在引导程序中使用text-right，而不会在控件开始堆栈时一直向右显示

时间：2016-12-30 20:13:22

标签： html css twitter-bootstrap css3 bootstrap-modal

enter code here我对一般的引导程序和编码很新，所以请不要因为这个问题而烦恼我。我正在尝试创建一个在页面中间对齐的表单。我可以使用text-right [label] [control]将标签文本向右移动，但是当我开始缩小页面时，它不会像我需要的那样堆叠，而是像这样堆叠。           [标签] [控制] 我需要它像这样堆栈： [标签] [控制] 我错过了什么？或者这是不可能用bootstrap？

<div class="container">   

    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2 text-right">
            @Html.LabelFor(d => d.EmployeeName)
        </div>
        <div class="col-sm-6">
            @Html.TextBoxFor(d => d.EmployeeName, new { @class = "form-control", @autofocus = "autofocus"})
            @Html.ValidationMessageFor(d => d.EmployeeName)
        </div>

    </div>
    <br />
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2 text-right">@Html.LabelFor(d => d.EmployeeNumber)</div>
        <div class="col-sm-6">
            @Html.TextBoxFor(d => d.EmployeeNumber, new { @class = "form-control", @autofocus = "autofocus", style = "width:60px;" })
            @Html.ValidationMessageFor(d => d.EmployeeNumber)
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2">@Html.LabelFor(d => d.Department)</div>
        <div class="col-sm-6">
            @Html.TextBoxFor(d => d.Department, new { @class = "form-control", @autofocus = "autofocus", style = "width:60px;" })
            @Html.ValidationMessageFor(d => d.Department)
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2">@Html.LabelFor(d => d.DateSubmitted)</div>
        <div class="col-sm-6">
            @Html.TextBoxFor(d => d.DateSubmitted, new { @Value = @DateTime.Now.ToShortDateString(), @class = "form-control", @readonly = "readonly", style = "width:auto;" })
            @Html.ValidationMessageFor(d => d.DateSubmitted)
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2">@Html.LabelFor(d => d.DonationType)</div>
        <div class="col-sm-6 dropdown">
            @Html.DropDownList("DonationType", ViewBag.DonationType as SelectList, new { @class = "form-control"})

            @Html.ValidationMessageFor(d => d.DonationType)
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2">@Html.LabelFor(d => d.Organization)</div>
        <div class="col-sm-6">
            @Html.TextBoxFor(d => d.Organization, new { @class = "form-control", @autofocus = "autofocus" })
            @Html.ValidationMessageFor(d => d.Organization)
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2">@Html.LabelFor(d => d.Address)</div>
        <div class="col-sm-6">
            @Html.TextBoxFor(d => d.Address, new { @class = "form-control", @autofocus = "autofocus" })
            @Html.ValidationMessageFor(d => d.Address)
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2 text-right">
            @Html.LabelFor(d => d.City)

        </div>
        <div class="col-sm-6">
            @Html.TextBoxFor(d => d.City, new { @class = "form-control", @autofocus = "autofocus", style = "width:50%;" })
            @Html.ValidationMessageFor(d => d.City)
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2">@Html.LabelFor(d => d.State)</div>
        <div class="col-sm-6">
            @Html.TextBoxFor(d => d.State, new { @class = "form-control", @autofocus = "autofocus", style = "width:25%;" })
            @Html.ValidationMessageFor(d => d.State)
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2">@Html.LabelFor(d => d.Zip)</div>
        <div class="col-sm-6">
            @Html.TextBoxFor(d => d.Zip, new { @class = "form-control", @autofocus = "autofocus", style = "width:25%;" })
            @Html.ValidationMessageFor(d => d.Zip)
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2">@Html.LabelFor(d => d.Category)</div>
        <div class="col-sm-6">
            @Html.DropDownList("Category", ViewBag.Category as SelectList, new { @class = "form-control" })
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2">@Html.LabelFor(d => d.DateOfRequest)</div>
        <div class="col-sm-6">
            @Html.TextBoxFor(d => d.DateOfRequest, new { @class = "form-control datepicker", placeholder = "Pick a Date", style = "width:100px" })
            @Html.ValidationMessageFor(d => d.State)
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2">@Html.LabelFor(d => d.AmountRequested)</div>
        <div class="col-sm-6">
            @Html.TextBoxFor(d => d.AmountRequested, new { @class = "form-control", style = "width:100px" })
            @Html.ValidationMessageFor(d => d.AmountRequested)
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2">@Html.LabelFor(d => d.AccountNumber)</div>
        <div class="col-sm-6">
            @Html.DropDownList("AccountNumber", ViewBag.AccountNumber as SelectList, new { @class = "form-control" })
            @Html.ValidationMessageFor(d => d.AccountNumber)
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2">@Html.LabelFor(d => d.RequestDescription)</div>
        <div class="col-sm-6">
            @Html.TextAreaFor(d => d.RequestDescription, new { @class = "form-control", @autofocus = "autofocus" })
            @Html.ValidationMessageFor(d => d.RequestDescription)
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2">@Html.LabelFor(d => d.BenefitToMembers)</div>
        <div class="col-sm-6">
            @Html.TextAreaFor(d => d.BenefitToMembers, new { @class = "form-control", @autofocus = "autofocus" })
            @Html.ValidationMessageFor(d => d.BenefitToMembers)
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2">@Html.LabelFor(d => d.NumMembersBenefited)</div>
        <div class="col-sm-6">
            @Html.TextBoxFor(d => d.NumMembersBenefited, new { @class = "form-control", @autofocus = "autofocus", style = "width:35%;" })
            @Html.ValidationMessageFor(d => d.NumMembersBenefited)
        </div>
    </div>


    <br />
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2" ;>@Html.LabelFor(d => d.RecommendedName)</div>
        <div class="col-sm-6">
            @Html.TextBoxFor(d => d.RecommendedName, new { @class = "form-control", @autofocus = "autofocus" })
            @Html.ValidationMessageFor(d => d.RecommendedName)
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2">@Html.LabelFor(d => d.RecommendTitle)</div>
        <div class="col-sm-6">
            @Html.TextBoxFor(d => d.RecommendTitle, new { @class = "form-control", @autofocus = "autofocus" })
            @Html.ValidationMessageFor(d => d.RecommendTitle)
        </div>

    </div>
    <br />
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-2">@Html.LabelFor(d => d.Priority)</div>
        <div class="col-sm-6">
            @Html.DropDownList("Priority", ViewBag.Priority as SelectList, new { @class = "form-control" })
            @Html.ValidationMessageFor(d => d.Priority)
        </div>
    </div>
    <br />

</div>

以下是html中的一个示例。

 <div class="container">
    <div class="row">
        <div class="col-sm-6 text-right">
            <label for="employeeName">Employee Name:</label>
        </div>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="EmployeeName" /> 
        </div>
    </div>

At full screen img

smaller screen img

1 个答案:

答案 0 :(得分：0)

我错了，实际上有一种内置的方法可以在Bootstrap中执行此操作。你想要做的是使用CSS horizontal forms：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

以上只是Bootstrap示例中的代码。

相关问题
最新问题