Question

您好我试图使内联形式与水平混合我有http://jsfiddle.net/TNLnP/3/但我希望得到类似

的内容

<label><input>
<label><input><label><input><label><input>

Answer 1

如果您想将两者保持在同一个form元素中，可以将form-inline添加到fieldset：

<form>
<div class="row">
    <fieldset class="form-inline">
        <label class="control-label">A</label>
        <input type="text" class="input-medium">
    </fieldset>
</div><!-- end row -->
<div class="row">
    <fieldset class="form-inline">
        <label class="control-label">B</label>
        <input type="text" class="input-mini" >
        <label class="control-label">C</label>
        <input type="text" class="input-mini" >
        <label class="control-label">D</label>
        <input type="text" class="input-mini" >
        <label class="control-label">E</label>
        <input type="text" class="input-mini" >
    </fieldset>
</div><!-- end row -->
</form>

http://jsfiddle.net/ZWNjw/

Answer 2

<!-- First Form =============================== -->
<div class="row">
  <form class="form-inline">
    <fieldset>
      <label class="control-label">A</label>
      <input type="text" class="input-medium">
    </fieldset>
  </form>
</div><!-- end row -->

<!-- Second Form ================================== -->
<div class="row">
  <form class="form-inline">
    <fieldset>
      <label class="control-label">B</label>
      <input type="text" class="input-mini" >
      <label class="control-label">C</label>
      <input type="text" class="input-mini" >
      <label class="control-label">D</label>
      <input type="text" class="input-mini" >
      <label class="control-label">E</label>
      <input type="text" class="input-mini" >
    </fieldset>
  </form>
</div><!-- end row -->

在jsfiddle处尝试此操作。希望它会对你有所帮助。：）

Twitter bootstrap混合水平形式与内联

2 个答案: