Question

我希望生成一个表单，例如输入行数和列数，它将表示下一个操作中所需的行数和列数。

假设我输入的行数为4，列数为5.最右边的列成为最后一行下方的最底部。我不想那样，我希望它能启用水平滚动条。这是我的代码。

<div class="container">
<div class="row">
    <div class="col-md-12">
        @for (int i = 0; i < Model.Columns.Capacity; i++) // Columns Capacity is 5
        {
            <div class="col-md-3">
                <div class="row">
                    @for (int k = 0; k < Model.Rows.Capacity; k++) //Rows Capacity is 4
                    {
                        <br />
                        <input type="text" name="name" class="form-control" />
                        <br />
                    }
                </div>
            </div>
        }
    </div>
</div>

之后，输出如下所示：

我希望第5列启用水平滚动条。感谢

Answer 1

您可以设置容器的宽度，使其不会换行，例如：

@{ 
    // standard col-md-3 form-control width, but needs to be hardcoded here
    // doesn't need to be exact and should include the padding/margin
    var inputwidth = 239;  
    var width = inputwidth * Model.Columns.Capacity;
}
<div class="container" style='width:@(width)px;overflow-y:auto'>

使用overflow-y:auto以便仅在需要时显示滚动条

建议的解决方案是切换行/列并使用表，因为在这种情况下您不使用bootstrap的响应功能。

编辑：根据要求，这是使用表格的等效版本 - 根据需要设置引导程序表类

<div class="container" style='width:@(240 * Model.Columns.Capacity)px;overflow-y:auto'>
<table style='width:100%' class='table table-striped table-condensed'>
  <tbody>
    @for (int k = 0; k < Model.Rows.Capacity; k++) //Rows Capacity is 4
    {
      <tr>
        @for (int i = 0; i < Model.Columns.Capacity; i++) // Columns Capacity is 5
        {
          <td>
            <input type="text" name="name" class="form-control col-md-3" />
          </td>
        }
      </tr>
  </tbody>
</table>

ASP.NET MVC Bootstrap启用水平滚动条

1 个答案: