Twitter bootstrap 引导模式中水平形式的输入字段溢出超出范围

Twitter bootstrap 引导模式中水平形式的输入字段溢出超出范围,twitter-bootstrap,Twitter Bootstrap,简单的水平表单,当显示大小较大时,输入表单字段溢出。当你缩小显示器时,它似乎又回到了极限。我如何确保它保持在范围内 而且,我似乎无法让标签和字段彼此相邻排列 看到我的小提琴了吗 请求背书 &时代; 发送电子邮件请求背书 电邮: 信息: 发送电子邮件 接近 这段CSS似乎是导致字段突破模式边界的原因: @media (min-width: 768px) .container { width: 750px; } 这会影响div id=“背书表单容器”class=“容器”元素。您是否可以使用

简单的水平表单,当显示大小较大时,输入表单字段溢出。当你缩小显示器时,它似乎又回到了极限。我如何确保它保持在范围内

而且,我似乎无法让标签和字段彼此相邻排列

看到我的小提琴了吗

请求背书
&时代;
发送电子邮件请求背书
电邮:
信息:
发送电子邮件
接近

这段CSS似乎是导致字段突破模式边界的原因:

@media (min-width: 768px)
.container {
    width: 750px;
}
这会影响
div id=“背书表单容器”class=“容器”
元素。您是否可以使用自己的
width:inherit
样式或类似的样式来覆盖此选项

标签和字段对齐 这是由于表单控件具有
display:block在引导中。您可以通过在标签和字段周围添加一个div来覆盖它,div将充当每个表单字段的容器。然后添加以下CSS以覆盖行为。此处的标签还添加了一个设置宽度,以使内容看起来一致:

label {
  width:70px;
}

.form-control {
  display:inline-block;
  width:80%;
}

jsiddle作为一个例子:

从modal body类部分中删除container类为我解决了这个问题。

谢谢!你是对的。我只是删除了container类,使其绑定得很好。关于为什么标签和字段对齐不是水平表单应该如何工作的问题有什么想法吗?也就是说,相邻的标签和字段对齐不是在顶部对齐,而是在顶部对齐?是的,这是正确的解决方案。我正要发布一个答案,但你可以在这里看到它是如何工作的:。我移除了容器并添加了填充物,它就像一个符咒一样工作。
label {
  width:70px;
}

.form-control {
  display:inline-block;
  width:80%;
}