内联表单无法正常工作

Question

尝试使用 form-inline 类从引导程序中获取内联表单。但是，我遇到了一些意外行为，我使用的代码与 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 类时，我得到了想要的结果，但是我没有很酷的文本框：

我知道来自引导程序的警告：

这仅适用于视口中至少 768 像素宽的表单。

但这是在大屏幕上，表单宽度为 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