如何在引导 css 中将动态生成的内容浮动到右侧？答案

【问题标题】：How to float dynamically generated content to the right in bootstrap css?如何在引导 css 中将动态生成的内容浮动到右侧？
【发布时间】：2018-01-13 18:55:43
【问题描述】：

我有一个动态生成两个字段（标签和文本框）的for 循环。我希望第二个字段位于最右边的角落。我应该如何设计它？这是我正在使用的for 循环：

<div class="form-group">
    @for(int i=0;i<2;i++)
    {
            <label class="required col-sm-3 control-label">
                TextBox  
            </label>
            <div class="col-sm-2">
                @{
                    @Html.TextBox("TextBox")
                }
            </div>
    }
</div>

这是我当前的输出：

【问题讨论】：

标签： html css asp.net-mvc twitter-bootstrap

【解决方案1】：

像这样添加 pull-right 类，使其向右对齐

<div class="form-group">
    @for(int i=0;i<data.Count;i++)
    {
            <label class="required col-sm-3 control-label">
                TextBox  
            </label>
            <div class="col-sm-2 pull-right">
                @{
                    @Html.TextBox("TextBox")
                }
            </div>
    }
</div>

【讨论】：

但这会将整个 div 向右移动。我只希望第二个元素在右边。我已经更新了我的代码
检查更新的答案，您需要将 pull-right 应用于

【解决方案2】：

试试这个

 <div class="form-group">
    @for(int i=0;i<data.Count;i++)
    {
       <div class="col-sm-12" style="margin:0px;">
           <div class="col-sm-6">
              <label class="required col-sm-3 control-label">
                 TextBox  
              </label>
              <div class="col-sm-2">
                  @{
                      @Html.TextBox("TextBox")
                   }
              </div>
           </div>
           <div class="col-sm-6">
               <div class="pull-right">
                   <label class="required col-sm-3 control-label">
                      TextBox  
                   </label>
                   <div class="col-sm-2">
                       @{
                           @Html.TextBox("TextBox")
                        }
                   </div>
               </div>
           </div>
       </div>
    }
</div>

【讨论】：

【解决方案3】：

我已使用浮动选项将特定组件右对齐

.right-div {
  float: right;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="form-group">
  @for(int i=0;i
  <2;i++) { <label class="required col-sm-3 control-label">
    TextBox
    </label>
    <div class="col-sm-2 right-div">
      @{ @Html.TextBox("TextBox") }
    </div>
    }
</div>

【讨论】：

【解决方案4】：

您可以申请 pull-right 类（它在引导程序 4 中被 float-right 替换）。但请注意，它会使用float: right css，而float 在某些情况下可能会出现一些问题！

其他选项是使用text-right，因为它使用text-align css，这在某些情况下可能会更好。

<div class="form-group">
@for(int i=0;i<2;i++)
{
        <label class="required col-sm-3 control-label">
            TextBox  
        </label>
        <div class="col-sm-2 text-right"> <!-- or pull-right or float-right /-->
            @{
                @Html.TextBox("TextBox")
            }
        </div>
}
</div>

【讨论】：