在引导中垂直对齐控件

我是bootstrap和css3的新手。我想让我的控件在中间垂直对齐，但有些无法使用引导类找到优雅的解决方案。请检查下面的示例代码段：在引导中垂直对齐控件

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div class="form-group col-md-5"> 
 
     <span class="fieldtext">Field 1</span> 
 
    </div> 
 
    <div class="form-group col-md-7"> 
 
     <input class="form-control input-sm"></input> 
 
    </div> 
 
    </div> 
 
</div>

来源

2015-06-17 user2185592

因为我明白，你想创建字段旁边，而不是在它上面的标签形式（如默认的窗体行为Bootstrap）你应该使用form-inline和form-group类。这样Bootstrap会将字段与标签对齐。

见这个例子：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<form class="form-inline"> 
 
    <div class="form-group"> 
 
    <label for="exampleInput">Field 1</label> 
 
    <input type="text" class="form-control" id="exampleInput"> 
 
    </div> 
 
</form>

来源

2015-06-17 10:08:02 Christina

我运行上面的代码片段，它仍然在输入字段上显示标签。我想要标签和输入内联和垂直对齐。 – user2185592

@ user2185592标签显示在输入字段的顶部，因为您正在非常小的视口中查看窗体（与您的示例一样）。如果您点击“完整页面”按钮在较大的视口中查看该视图，则会看到另一个旁边的视图。或者，如果您需要为较小的视口相互显示它们，则可以将相关规则自己添加到'.form-control'元素中：'display：inline-block;宽度：自动; vertical-align：middle;' – Christina

我没有意识到这是一个视口问题。后来，我搜索引导文件，发现这个[链接]（http://www.w3schools.com/bootstrap/bootstrap_forms.asp），它是完美的。你的答案也匹配它，因此将其标记为答案 – user2185592

<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
<span class="sr-only">Next</span>

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="next"> 
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
<span class="sr-only">previous</span>

只需添加类权（引导-CLA ss）在下一个按钮的转盘控件中，以及在引导程序中的前一个按钮的转盘控件中的左侧类（Bootstrap-class）。

来源

2015-06-17 11:24:57

在引导中垂直对齐控件

回答

相关问题