c# - 内联表单无法正常工作

Question

尝试使用 form-inline 类从 Bootstrap 中获取内联表单。但是，我遇到了一些意外行为，并且我使用的代码与 Boostrap 官方页面上列出的代码完全相同。

这是我得到的:

代码:

@using (Html.BeginForm("Edit", "Index", FormMethod.Post, new { @class = "form-inline" }))
{
    <div class="form-group">
        <label for="new-value">Enter new value: </label>
        <input type="text" id="new-value" class="form-control" />
    </div>
    <div class="checkbox">
        <label>
            Public: <input type="checkbox" />
        </label>
    </div>
    <input type="submit" class="btn btn-primary" />
}

当我从文本框中删除 form-control 类时，我得到了想要的结果，但那时我没有很酷的文本框:

我知道来自 Bootstrap 的警告:

This only applies to forms within viewports that are at least 768px wide.

但这是在大屏幕上，表单宽度为 1160px。

Answer 1

我已经编辑了你的代码。 希望这就是您想要的!

HTML

<form class="form-inline">
  <div class="form-group">
    <label for="new-value">Enter new value: </label>
    <input type="text" id="new-value" class="form-control" />
  </div>
  <div class="form-group">
    <div class="checkbox">
      <label> Public:
        <input type="checkbox" />
      </label>
    </div>
  </div>
  <div class="form-group">
    <input type="submit" class="btn btn-primary" />
  </div>
</form>

检查工作模型 http://www.bootply.com/ZWGwdEcnva