在twitter bootstrap中横向形成内部形式？

作者: 撩心
发布时间: 2024-12-18 04:41:17 (1月前)
转自：

6 条回复

0#
回复此人
与之 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 为了简单起见，只需添加一个 <code> class="form-inline" </code> 在输入之前。 </p> <P> 的<strong> 例： </强> <BR/> <code> <div class="col-md-4 form-inline"> //add the class here... <label>Lot Size:</label> <input type="text" value="" name="" class="form-control" > </div> </code> </p> </DIV>

编辑
1#
回复此人
取之 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对于bootstrap 3上面的示例有效但过于复杂，而不是使用表单组使用form-inline来表示您想要内联的字段。 </p> <P> 例如： </p> <pre> <code> <div class="form-group"> <label>CVV</label> <input type="text" size="4" class="form-control" /> </div> <div class="form-inline"> <label>Expiration (MM/YYYY)</label><br> <input type="text" size="2" class="form-control" /> / <input type="text" size="4" class="form-control" /> </div> </code> </pre> </DIV>

编辑
2#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我知道这是一个陈旧的答案，但这是我通常做的事情： </p> <P> CSS： </p> <pre> <code> .form-control-inline { width: auto; float:left; margin-right: 5px; } </code> </pre> <P> 然后在div中包装要内联的字段，并将.form-control-inline添加到输入中，例如： </p> <P> HTML </p> <pre> <code> <label class="control-label">Date of birth:</label> <div> <select class="form-control form-control-inline" name="year"> ... </select> <select class="form-control form-control-inline" name="month"> ... </select> <select class="form-control form-control-inline" name="day"> ... </select> </div> </code> </pre> </DIV>

编辑
3#
回复此人
昵称不能为空 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 不要窝 <code> <form> </code> 标签，这将无法正常工作。只需使用Bootstrap类。 </p> <H3> Bootstrap 3 </H3> <pre> <code> <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> </code> </pre> <P> 你可以通过多种方式实现这种行为，这只是一个例子。在此测试它 <a href="http://www.bootply.com/127431" rel="noreferrer"> bootply </A> </p> <H3> Bootstrap 2 </H3> <pre> <code> <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> </code> </pre> <P> 请注意，我正在使用 <code> .form-inline </code> 在一个内部获得propper造型 <code> .controls </code> 。 <BR/> 你可以测试一下 <a href="http://jsfiddle.net/simbirsk/nbwNf/" rel="noreferrer"> 这个 </A> 的jsfiddle </p> </DIV>

编辑
4#
回复此人
昵称为空呵呵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这使用twitter bootstrap 3.x和一个css类来使标签位于输入之上。这是一个 <a href="http://jsfiddle.net/Batteryacid/qzLqy0k1/"> 小提琴链接 </A> ，确保将结果面板扩展到足以看到效果。 </p> <P> HTML： </p> <pre> <code> <div class="row myform"> <div class="col-md-12"> <form name="myform" role="form" novalidate> <div class="form-group"> <label class="control-label" for="fullName">Address Line</label> <input required type="text" name="addr" id="addr" class="form-control" placeholder="Address"/> </div> <div class="form-inline"> <div class="form-group"> <label>State</label> <input required type="text" name="state" id="state" class="form-control" placeholder="State"/> </div> <div class="form-group"> <label>ZIP</label> <input required type="text" name="zip" id="zip" class="form-control" placeholder="Zip"/> </div> </div> <div class="form-group"> <label class="control-label" for="country">Country</label> <input required type="text" name="country" id="country" class="form-control" placeholder="country"/> </div> </form> </div> </div> </code> </pre> <P> CSS： </p> <pre> <code> .myform input.form-control { display: block; /* allows labels to sit on input when inline */ margin-bottom: 15px; /* gives padding to bottom of inline inputs */ } </code> </pre> </DIV>

编辑

登录后才能参与评论