如何编写Razor代码结合Bootstrap实现表单两字段并排显示？

我来帮你搞定这个Condition3场景下两字段并排的需求！核心思路是利用Bootstrap的栅格系统精确控制元素宽度和排列，既不用依赖会强制换行的form-group，也能和其他条件下的表单元素保持对齐。

修改后的完整代码 #

@foreach (var d in data) { 
    if (Condition1) { 
        <div class="form-group"> 
            <label class="col-sm-3 control-label"> Text 1 </label> 
            <div class="col-sm-8"> @Html.TextBox("Box1", null, new { @class = "form-control" }) </div> 
        </div> 
    } else if(Condition2) { 
        <div class="form-group"> 
            <label class="col-sm-3 control-label"> Text 2 </label> 
            <div class="col-sm-8"> @Html.TextBox("Box2", null, new { @class = "form-control" }) </div> 
        </div> 
    } else if(Condition3) { 
        <!-- 用Bootstrap栅格实现并排，和其他字段保持布局对齐 -->
        <div class="row">
            <label class="required col-sm-3 control-label"> Horsepower and RPM </label>
            <!-- 第一个输入框占4列，可根据需求调整宽度 -->
            <div class="col-sm-4">
                @Html.TextBox("Horsepower", null, new { @class = "form-control" })
            </div>
            <!-- 第二个输入框占4列，和第一个并排显示 -->
            <div class="col-sm-4">
                @Html.TextBox("RPM", null, new { @class = "form-control" })
            </div>
        </div>
    } 
}

关键细节说明 #

• 布局对齐：保持label的col-sm-3类，和其他条件下的label宽度一致，避免整体布局错乱。
• 并排逻辑：用row容器包裹label和两个输入框，两个输入框分别使用col-sm-4（两列总和为8，和其他条件下的col-sm-8对应，保证右侧区域宽度统一），自然实现同一行并排。
• 样式统一：给所有输入框加上form-control类，确保Bootstrap默认表单样式的一致性，避免出现样式错乱。
• 灵活调整：如果需要更紧凑的行内效果，也可以给输入框容器额外添加form-inline类，但栅格系统的方式对不同屏幕尺寸的适配性更强。

内容的提问来源于stack exchange，提问作者testacc