6

关于 Twitter-Bootstrap 输入宽度/CSS 类，我已经有一段时间摸不着头脑了。我有一个包含客户地址信息的表格。我想制作“姓名”（名字、中间名和姓氏）和内联表单/行，其中三个输入导致其余输入的宽度相等（使用class="input-xxlarge"）。

当我在每个输入上使用“input-*”（例如“input-small”）时，它们要么太宽，要么太窄（总共）。

<div class="control-group">
    <label class="control-label" for="FirstName">Name</label>
    <div class="controls">
        <input class="input-small" id="FirstName" name="FirstName" placeholder="First name" type="text" value="" />
        <input class="input-small" id="MiddleName" name="MiddleName" placeholder="Middle name" type="text" value="" />
        <input class="input-small" id="LastName" name="LastName" placeholder="Last name" type="text" value="" />
    </div>
</div>

http://jsfiddle.net/RXGKN/

设置百分比宽度（内联）也不是解决方案。有没有人能够做到这一点，所以左侧和右侧都适合“完美”的其余输入（包括响应式）？

有没有办法定义一个等于“input-xxlarge”宽度的“行”，并在“控制组”>“控件”中的每个输入上使用 spanX（例如 span4）。

4

1 回答 1

11 
<div class="control-group">
  <label class="control-label" for="FirstName">Name</label>
    <div class="controls row-fluid">
        <div class="span2 row"><input class="span12" id="FirstName" name="FirstName" placeholder="Firstname" type="text" value="" /></div>
        <div class="span2 row"><input class="span12" id="MiddleName" name="MiddleName" placeholder="Middlename" type="text" value="" /></div>
        <div class="span2 row"><input class="span12" id="LastName" name="LastName" placeholder="Lastname" type="text" value="" /></div>
        <p class="help-block span12 row" style="color: red;">How do I make these 3 input's (together) equal width of the "Adresse" input.</p>
    </div>
</div>
<div class="control-group">
  <label class="control-label" for="AddressLine1">Adresse</label>
  <div class="controls row-fluid">
    <div class="span6 row"><input class="span12" id="AddressLine1" name="AddressLine1" placeholder="AddressLine1" type="text" value="" /></div>
  </div>
</div>

http://jsfiddle.net/baptme/RXGKN/2/

于 2012-06-10T13:32:48.870 回答