twitter-bootstrap Bootstrap 表单水平：将两个输入彼此对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15993216/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap form horizontal: align two inputs next to each other
提问by Jan
I am trying to figure out how to align two inputs (like zip and city) parallel side by side in Bootstrap using form-horizontal. I tried using the div.rowwrapper with spanXclasses combined with input-block-level.
我想弄清楚如何在 Bootstrap 中使用form-horizontal. 我尝试将div.row包装器与spanX类结合使用input-block-level。
Alternatively, I attempted to leave out the div.rowbut giving the inputs the spanXclasses directly.
或者，我试图省略div.row但spanX直接给输入类。
The problem is, that the width of the inputs differs. Maybe this is a bug, but at a certain viewport (requires bootstrap-responsive.css) it works properly — but not with a large viewport and sometimes horizontal scrollbars appear.
问题是，输入的宽度不同。也许这是一个错误，但在某个视口（需要bootstrap-responsive.css）它可以正常工作 - 但不是大视口，有时会出现水平滚动条。
Shouldn't rhe responsive stylesheet of Bootstrap adapt the sizes? Wrapping the whole code in a div.containermakes it even worse.
Bootstrap 的响应式样式表不应该调整大小吗？将整个代码包装在一个中div.container会使情况变得更糟。
Maybe you can even show me some complete different solutions?
也许您甚至可以向我展示一些完全不同的解决方案？
I prepared a jsFiddleand some screenshots for you. You can find the size of the window and the size of the viewport (in square brackets) in the title. Click the images for full size.
我为你准备了一个jsFiddle和一些截图。您可以在标题中找到窗口的大小和视口的大小（方括号中）。单击图像以获得完整尺寸。
回答by banjoSas
You have to remember that spanXclasses are implemented with percentages, so sometimes the edges will not align properly when putting multiple input areas in same row. So when you use a span12class, the members of that divmight get warped.
你必须记住，spanX类是用百分比实现的，所以当将多个输入区域放在同一行时，有时边缘不会正确对齐。所以当你使用一个span12类时，它的成员div可能会变形。
The labels are another concern in this multiple input per line scenario. They take 160px, so they are not compatible with span12input areas. They are best for one input per line and span1-span10.
在这种每行多输入场景中，标签是另一个问题。它们需要 160px，因此它们与span12输入区域不兼容。它们最适合每行一个输入和span1-span10.
<form class="container-fluid">
<div class="control-group">
<div class="controls row-fluid">
<input type="text" class="span11" placeholder="Street" />
</div>
<div class="controls controls-row row-fluid">
<input type="text" class="span4" placeholder="Zip" />
<input type="text" class="span7" placeholder="City" />
</div>
</div>
</form>
I have added two more classes on your 2nd row, controls-rowand row-fluid- first one aligns the rows together while the other makes the length fluid.
我在您的第二行添加了另外两个类，controls-row并且row-fluid- 第一个将行对齐，而另一个使长度变得流畅。
A better design decision will be to get rid of the labels - the placeholders already do their job - in case of multiple input areas on same row. That way you can use the entire 11 columns.
一个更好的设计决定是去掉标签——占位符已经完成了它们的工作——以防同一行有多个输入区域。这样您就可以使用整个 11 列。
The horizontal scroll bar will appear sometimes due to the 12 column structure, so get rid of it by setting "overflow-x:hidden" right on the body element.
由于12列结构，有时会出现水平滚动条，因此通过在body元素上设置“overflow-x:hidden”来摆脱它。
回答by Akshaya Raghuvanshi
Because which style you are changing is working only for mobile screen devices. If you use the above code;
因为您正在更改的样式仅适用于移动屏幕设备。如果你使用上面的代码；
.input-block-level{
width:60%;
}
you'll only find the zipand countryinputs aligned only on mobile viewport example-320px/480px and above it wouldn't work. So you have to add any style like this to add in other mediaqueries also like 768px or whatever you want.
Your code will work at any cost either style it via classmethod or via input[type="text"]method, only thing they should be in the exact mediaqueries.
你只会发现zip和country输入仅在移动视口 example-320px/480px 上对齐，它不会工作。所以你必须添加任何这样的样式来添加其他媒体查询，比如 768px 或任何你想要的。您的代码将不惜一切代价通过class方法或input[type="text"]方法对其进行样式设置，只是它们应该在确切的媒体查询中。
