内联表单无法正常工作

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课程时，我得到了想要的结果，但是我没有那个很酷的文本框：

我意识到bootstrap的警告：

  

这仅适用于视口中至少为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