启用水平滚动条的ASP.NET MVC引导程序

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以便仅在需要时显示滚动条

推荐的解决方案是切换行/列并使用表，因为在这种情况下您不使用引导程序的响应功能。

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

<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>