Twitter引导程序嵌套表单布局

我刚开始使用引导程序。我需要定位三个输入字段以形成一个“地址”字段。Twitter引导程序嵌套表单布局

What I'm trying to achieve

我曾尝试使用以下HTML尝试：

<label for="street">Address</label> 
<input class="span3" id="street" name="street" placeholder="Street"/><br/> 

<input id="zipcode" class="span1 inline" placeholder="Zipcode"/> 
<input id="city" class="span2 inline" placeholder="City"/>

这几乎是正确的，但大小是有点过

incorrect

是否有更好的办法实现这种布局（无需自定义样式来实现正确的宽度）？

来源

2012-05-02 geoffreydv

尝试使用以下：

<div class="container"> 
<div class="row"> 
    <div class="span6 offset1"> 
     <form> 
      <label for="street">Address</label> 
      <div class="controls controls-row"> 
       <input type="text" class="span3" id="street" name="street" placeholder="Street"/> 
      </div> 
      <div class="controls controls-row"> 
       <input type="text" id="zipcode" class="span1" placeholder="Zipcode"/> 
       <input type="text" id="city" class="span2" placeholder="City"/> 
      </div> 
     </form> 
    </div> 
</div>

这里是一个fiddle

来源

2012-09-04 11:31:06

注意这是用于Bootstrap v2而不是v3。 – Baxny

自定义装订线宽度和跨度，我认为span24将是准确的宽度，装订线宽度10px的和SPAN1 30像素跨距2 70像素等更好....告诉我，你是你使用SASS以下

如果上海社会科学院

$gridColumns: 24 
$gridColumnWidth: 30px 
$gridGutterWidth: 10px

在你的SASS文件，但不要忘了导入引导SASS文件

还有一两件事 - 我忘了这里，你应该同时使用Twitter的引导使用控制组和其他格式;请参考bootstrap网站

来源

2012-05-02 14:39:37 Chandrakant

我想如果您只是使用'span2'&'span1'类而没有'inline'类，它只会显示具有正确边距的网格布局。它看起来是导致错位的边际。

来源

2012-05-02 14:55:46 Ollie

所以我这个苦苦挣扎了一会儿，终于得到了解决。 Here's what I came up with。这是一个简单的带有水平（内联）字段的注册表单。

来源

2016-02-17 16:25:14

Twitter引导程序嵌套表单布局

回答

相关问题