在下面的 jsfiddle 中,我有一个带有输入和提交的内联表单。当我减小屏幕尺寸时,输入跳变为 100% 宽度——这显然是响应性的开始。问题是提交按钮没有应用 100% 宽度……如果 Bootstrap ,这是我期望的已将 100% 应用于输入。
知道这是为什么吗?
<form class="form-inline" role="form" style="width: 350px; margin: 0 auto;">
<div class="form-group" >
<label for="postcode" class="sr-only">Postcode:</label>
<input type="text" class="form-control input-lg" id="email" placeholder="Postcode">
</div>
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</form>
最佳答案
默认情况下,Bootstrap 不会在任何断点处使 button
元素 100% 宽,您必须自己完成,在本例中使用媒体查询。例如:
@media (max-width: 767px) {
.btn {
width: 100%;
}
}
关于css - Twitter Bootstrap 表单样式未按预期运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28714817/