Question

我在表格底部有VS 2013脚手架的常用按钮的以下扩展名：

<div class="form-group">
    @Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })
    </div>
</div>
<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="reset" value="Reset" class="btn btn-danger" />
        <input type="submit" value="Submit" class="btn btn-success" />
        <input type="button" value="Cancel" class="btn btn-warning" />
    </div>
</div>

这组元素左对齐，即＆＃39; 重置＆＃39;按钮的左边缘与＆＃39; PhoneNumber＆＃39;的左边缘对齐。输入。我希望＆＃39; 取消＆＃39;的正确边缘按钮与＆＃39; PhoneNumber＆＃39;的右边缘对齐领域。我该怎么做？

Answer 1

您可以为每个按钮添加pull-right以正确对齐并反转其顺序：

<div class="form-group">
    <div class="col-md-offset-2 col-md-10 btn-group">
        <input type="button" value="Cancel" class="btn btn-warning pull-right" />
        <input type="submit" value="Submit" class="btn btn-success pull-right" />
        <input type="reset" value="Reset" class="btn btn-danger pull-right" />

    </div>
</div>

Answer 2

在具有属性.text-right

的父容器上使用text-align: right

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label class="control-label col-md-2">Phone number</label>
  <div class="col-md-10">
    <div class="form-control">Phone Number</div>
    <div class="text-danger">Validation text</div>
  </div>
</div>
<div class="form-group">
  <div class="col-md-offset-2 col-md-10">
    <div class="text-right">
      <input type="reset" value="Reset" class="btn btn-danger" />
      <input type="submit" value="Submit" class="btn btn-success" />
      <input type="button" value="Cancel" class="btn btn-warning" />
    </div>
  </div>
</div>

＆＃13;

Answer 3

你应该使用pull-right类而不是col-md-offset-2。在相同的col-md-10中使用pull-right类来浮动div右侧的元素。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label class="control-label col-md-2">Phone number</label>
  <div class="col-md-10">
    <div class="form-control">Phone Number</div>
    <div class="text-danger">Validation text</div>
  </div>
</div>
<div class="form-group">
  <div class="pull-right col-md-10">
   
      <input type="reset" value="Reset" class="btn btn-danger" />
      <input type="submit" value="Submit" class="btn btn-success" />
      <input type="button" value="Cancel" class="btn btn-warning" />
    
  </div>
</div>

Answer 4

<div class="form-group">
    <div class="col-md-12 pull-right btn-group">
        <input type="button" value="Cancel" class="btn btn-warning pull-right" />
        <input type="submit" value="Submit" class="btn btn-success pull-right" />
        <input type="reset" value="Reset" class="btn btn-danger pull-right" />

    </div>
</div>

Answer 5

<input type="submit" style="left-margin: 50px"/>

使用它。您也可以使用上面定义的类来设置它，但另一种方法是使用右边0像素的边距来编写样式。

如何将我的按钮输入正确对齐到表单底部的右侧？

5 个答案: