bootstrap 4 alpha 4 和 alpha 6 之间的形式差异
Difference in forms between bootstrap 4 alpha 4 and alpha 6
我有以下代码:
<div class="card">
<div class="card-block">
<form>
<div class="form-group col-sm-6">
<label for="visualTheme" class="control-label">Visual Theme</label>
<div>
<input class="form-control"
style="height:30px;width:250px" id="visualTheme" />
</div>
</div>
<div class="form-group col-sm-6">
<label for="startingScreen" class="control-label">Starting Screen</label>
<div>
<input class="form-control"
style="height:30px;width:250px" id="startingScreen" />
</div>
</div>
</form>
</div>
使用 B4 Alpha 4 产生的是这样的东西:
但是使用 Alpha 6 看起来像这样:
这是我的
Fiddle
为什么即使有足够的空间让它们位于同一行,它也会换行?它与 Alpha 4 完美搭配。
谢谢
col-*
应始终放在 row
..
<div class="card">
<div class="card-block">
<form class="row">
<div class="form-group col-sm-6">
<label for="visualTheme" class="control-label">Visual Theme</label>
<div>
<input class="form-control" style="height:30px;width:250px" id="visualTheme">
</div>
</div>
<div class="form-group col-sm-6">
<label for="startingScreen" class="control-label">Starting Screen</label>
<div>
<input class="form-control" style="height:30px;width:250px" id="startingScreen">
</div>
</div>
</form>
</div>
</div>
我有以下代码:
<div class="card">
<div class="card-block">
<form>
<div class="form-group col-sm-6">
<label for="visualTheme" class="control-label">Visual Theme</label>
<div>
<input class="form-control"
style="height:30px;width:250px" id="visualTheme" />
</div>
</div>
<div class="form-group col-sm-6">
<label for="startingScreen" class="control-label">Starting Screen</label>
<div>
<input class="form-control"
style="height:30px;width:250px" id="startingScreen" />
</div>
</div>
</form>
</div>
使用 B4 Alpha 4 产生的是这样的东西:
但是使用 Alpha 6 看起来像这样:
这是我的 Fiddle
为什么即使有足够的空间让它们位于同一行,它也会换行?它与 Alpha 4 完美搭配。
谢谢
col-*
应始终放在 row
..
<div class="card">
<div class="card-block">
<form class="row">
<div class="form-group col-sm-6">
<label for="visualTheme" class="control-label">Visual Theme</label>
<div>
<input class="form-control" style="height:30px;width:250px" id="visualTheme">
</div>
</div>
<div class="form-group col-sm-6">
<label for="startingScreen" class="control-label">Starting Screen</label>
<div>
<input class="form-control" style="height:30px;width:250px" id="startingScreen">
</div>
</div>
</form>
</div>
</div>