html – Twitter-Bootstrap输入内联宽度(名字,中间名和姓氏)

发布时间：2020-12-14 22:34:50 所属栏目：资源来源：网络整理

导读：关于Twitter-Bootstrap输入宽度/ CSS类,我一直在摸不着头脑.我有一个包含客户地址信息的表格.我想制作“名称”(名字,中间名和姓)和内联表格/行,其中三个输入的结果与其余输入的宽度相等(使用class =“input-xxlarge”). 当我在每个输入上使用“input- *”(例

关于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”宽度的“行”,并在“control-group”>中的每个输入上使用spanX(ex.span4). “控制”.

解决方法

<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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!