感谢 James Donnelly,这个问题已经解决了。我的示例已更新为有效的解决方案。
我的声誉不够高,所以我无法发布图片,所以我将尝试尽可能地描述它。我在表单上有 7 个文本框和一个文本区域,当我加载页面时,它当前将每个文本框加载到单独的行上。
但是,我希望文本框像这样加载:
1 2 3
4 5 6 7
---8---(跨越)
我应该把每一行放在一个div中吗?我尝试将每个文本框浮动到左侧,但这不能正常工作。如果这让事情变得更容易,我会在我的项目中设置 Twitter 引导程序。
这是我的工作代码:
<div class="well">
<h4>Enter Movie in System:</h4>
@using (Html.BeginForm()) {
<div>
<div class="input-prepend">
<span class="add-on"><i class="icon-film"></i></span>
@Html.TextBoxFor(m => m.Title, new { placeholder = "Title" })
@Html.ValidationMessageFor(m => m.Title)
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-facetime-video"></i></span>
@Html.TextBoxFor(m => m.Director, new { placeholder = "Director" })
@Html.ValidationMessageFor(m => m.Director)
</div>
@* Make dropdown *@
<div class="input-prepend">
<span class="add-on"><i class="icon-tags"></i></span>
@Html.TextBoxFor(m => m.parentGenre, new { placeholder = "Genre" })
@Html.ValidationMessageFor(m => m.parentGenre)
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-star-empty"></i></span>
@Html.TextBoxFor(m => m.Stars, new { placeholder = "Actor" })
@Html.ValidationMessageFor(m => m.Stars)
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-time"></i></span>
@Html.TextBoxFor(m => m.Duration, new { placeholder = "Duration (mins)" })
@Html.ValidationMessageFor(m => m.Duration)
</div>
@* Make dropdown *@
<div class="input-prepend">
<span class="add-on"><i class="icon-warning-sign"></i></span>
@Html.TextBoxFor(m => m.Rating, new { placeholder = "Rating" })
@Html.ValidationMessageFor(m => m.Rating)
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-calendar"></i></span>
@Html.TextBoxFor(m => m.releaseDate, new { placeholder = "Release Date" })
@Html.ValidationMessageFor(m => m.releaseDate)
</div>
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><i class="icon-comment"></i></span>
@Html.TextAreaFor(m => m.Description, new { placeholder = "Description", @class="input-xxlarge" })
@Html.ValidationMessageFor(m => m.Description)
</div>
</div>
<p>
<button class="btn" type="submit" value="Register">Register</button>
</p>
@Html.ValidationSummary()
</div>
}