啟用水平滾動條的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>