【问题标题】:Twitter-Bootstrap input inline widths (firstname, middlename and lastname)Twitter-Bootstrap 输入内联宽度(名字、中间名和姓氏)
【发布时间】:2012-06-13 15:37:36
【问题描述】:

关于 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)。

【问题讨论】:

    标签: html css forms twitter-bootstrap


    【解决方案1】:
    <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/

    【讨论】:

    • 谢谢。正是我需要的 =)
    • 看起来解决方案的关键部分是在 标签上设置“span*”类。 Bootstrap 具有 标记的样式,可设置宽度和边框,这会使布局不像常规
      标记那样完全适合网格。
    • 应用到输入的内部跨度span12 是否设置为使用包装输入的span2 的100%?
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签