在twitter引导中表单内嵌表单内联？ [英] Form inline inside a form horizontal in twitter bootstrap?

问题描述

有没有可能设置一个看起来像这样的表单（请参阅下面的链接）内部form-inline内部表单 - 如下例所示：

alt =UI目标的截图>

解决方案

不要嵌套< form> 标签，这是行不通的。只需使用Bootstrap类。

引导程式3

 < form class =form-horizo​​ntal role =form> 
< div class =form-group> 
< label for =inputTypeclass =col-md-2 control-label> Type< / label> 
< div class =col-md-3> 
< input type =textclass =form-controlid =inputTypeplaceholder =Type> 
< / div> 
< / div> 
< div class =form-group> 
< span class =col-md-2 control-label>元数据< / span> 
< div class =col-md-6> 
< div class =form-group row> 
< label for =inputKeyclass =col-md-1 control-label> Key< / label> 
< div class =col-md-2> 
< input type =textclass =form-controlid =inputKeyplaceholder =Key> 
< / div> 
< label for =inputValueclass =col-md-1 control-label>值< / label> 
< div class =col-md-2> 
< input type =textclass =form-controlid =inputValueplaceholder =Value> 
< / div> 
< / div> 
< / div> 
< / div> 
< / form> 
  

您可以通过多种方式实现该行为，这只是一个示例。在此 bootply 上测试它

Bootstrap 2

 < form class =form-horizo​​ntal> 
< div class =control-group> 
< label class =control-labelfor =inputType>类型< / label> 
< div class =controls> 
< input type =textid =inputTypeplaceholder =Type> 
< / div> 
< / div> 
< div class =control-group> 
< span class =control-label>元数据< / span> 
< div class =controls form-inline> 
< label for =inputKey>键< / label> 
< input type =textclass =input-smallplaceholder =Keyid =inputKey> 
< label for =inputValue>值< / label> 
< input type =passwordclass =input-smallplaceholder =Valueid =inputValue> 
< / div> 
< / div> 
< / form> 
  

请注意，我正在使用 .form-inline 在 .controls 中获取propper样式。

您可以在 this jsfiddle

What's the best way to design a form that looks like this (please see link below) in twitter bootstrap without any homemade classes ?

Is it possible to set a inner form-inline inside a form-horizontal like the below example:

解决方案

Don't nest <form> tags, that will not work. Just use Bootstrap classes.

Bootstrap 3

<form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="inputType" class="col-md-2 control-label">Type</label>
      <div class="col-md-3">
          <input type="text" class="form-control" id="inputType" placeholder="Type">
      </div>
    </div>
    <div class="form-group">
        <span class="col-md-2 control-label">Metadata</span>
        <div class="col-md-6">
            <div class="form-group row">
                <label for="inputKey" class="col-md-1 control-label">Key</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputKey" placeholder="Key">
                </div>
                <label for="inputValue" class="col-md-1 control-label">Value</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputValue" placeholder="Value">
                </div>
            </div>
        </div>
    </div>
</form>

You can achieve that behaviour in many ways, that's just an example. Test it on this bootply

Bootstrap 2

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputType">Type</label>
        <div class="controls">
            <input type="text" id="inputType" placeholder="Type">
        </div>
    </div>
    <div class="control-group">
        <span class="control-label">Metadata</span>
        <div class="controls form-inline">
            <label for="inputKey">Key</label>
            <input type="text" class="input-small" placeholder="Key" id="inputKey">
            <label for="inputValue">Value</label>
            <input type="password" class="input-small" placeholder="Value" id="inputValue">
        </div>
    </div>
</form>

Note that I'm using .form-inline to get the propper styling inside a .controls.
You can test it on this jsfiddle

这篇关于在twitter引导中表单内嵌表单内联？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！