ป้ายกำกับทางด้านซ้ายแทนเหนือช่องป้อนข้อมูล

ฉันต้องการให้ป้ายกำกับไม่อยู่เหนือช่องป้อนข้อมูล แต่อยู่ทางด้านซ้าย

<form method="post" action="" role="form" class="form-inline">
  <div class="form-group">
    <label for="rg-from">Ab: </label>
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <div class="form-group">
    <label for="rg-to">Bis: </label>
    <input type="text" id="rg-to" name="rg-to" value="" class="form-control">
  </div>
  <div class="form-group">
    <input type="button" value="Clear" class="btn btn-default btn-clear"> 
    <input type="submit" value="Los!" class="btn btn-primary">
  </div>
</form>

รหัสนี้ให้ฉัน:

ฉันต้องการที่จะมี:

คุณสามารถใช้คลาสแบบอินไลน์สำหรับแต่ละกลุ่มฟอร์ม :)

<form>                      
    <div class="form-group form-inline">                            
        <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
</form>

วาง<label>ด้านนอกform-group:

<form class="form-inline">
  <label for="rg-from">Ab: </label>
  <div class="form-group">
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <!-- rest of form -->
</form>

เอกสาร Bootstrap 3 พูดถึงสิ่งนี้ในแท็บเอกสาร CSS ในส่วนที่ระบุว่า "ต้องใช้ความกว้างที่กำหนดเอง" ซึ่งระบุว่า:

อินพุตเลือกและพื้นที่ข้อความกว้าง 100% ตามค่าเริ่มต้นใน Bootstrap ในการใช้แบบฟอร์มอินไลน์คุณจะต้องกำหนดความกว้างบนตัวควบคุมฟอร์มที่ใช้ภายใน

หากคุณใช้เบราว์เซอร์และเครื่องมือ Firebug หรือ Chrome เพื่อระงับหรือลดรูปแบบ "ความกว้าง" คุณจะเห็นสิ่งต่างๆเรียงกันตามที่คุณต้องการ เห็นได้ชัดว่าคุณสามารถสร้าง CSS ที่เหมาะสมเพื่อแก้ไขปัญหาได้

อย่างไรก็ตามฉันคิดว่ามันแปลกที่ฉันต้องทำสิ่งนี้เลย ฉันอดไม่ได้ที่จะรู้สึกว่าการจัดการนี้ทั้งน่ารำคาญและในระยะยาวมักเกิดข้อผิดพลาด ในที่สุดฉันใช้คลาสจำลองและ JS บางตัวเพื่อแสดงอินพุตอินไลน์ทั้งหมดของฉันทั่วโลก เป็นกรณีเล็ก ๆ น้อย ๆ จึงไม่น่ากังวลมากนัก

อย่างไรก็ตามฉันก็ชอบที่จะได้ยินจากคนที่มีโซลูชันที่ "ถูกต้อง" และสามารถกำจัด shim / hack ของฉันได้

หวังว่านี่จะช่วยได้และเป็นอุปกรณ์สำหรับคุณในการไม่เป่าปะเก็นกับทุกคนที่เพิกเฉยต่อคำขอของคุณเนื่องจากเป็นข้อกังวลเกี่ยวกับ Bootstrap 3

คุณสามารถสร้างแบบฟอร์มดังกล่าวโดยที่ฉลากและตัวควบคุมฟอร์มอยู่ด้านข้างโดยใช้สองวิธี -

1. เค้าโครงฟอร์มแบบอินไลน์

<form class="form-inline" role="form">
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <button type="reset" class="btn btn-default">Reset</button>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

2. เค้าโครงฟอร์มแนวนอน

<form class="form-horizontal">
    <div class="row">
        <div class="col-sm-4">
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-3">Email</label>
                <div class="col-xs-9">
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-3">Password</label>
                <div class="col-xs-9">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <button type="reset" class="btn btn-default">Reset</button>
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </div>
</form>

คุณสามารถตรวจสอบหน้านี้เพื่อดูข้อมูลเพิ่มเติมและการสาธิตสด - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

แบบนี้

การสาธิต

HTML

<div class="row">
  <form class="form-inline">
    <fieldset>
      <label class="control-label"><strong>AB :</strong></label>
      <input type="text" class="input-mini" >
      <label class="control-label"><strong>BIS:</strong></label>
      <input type="text" class="input-mini" >
      <input type="button" value="Clear" class="btn btn-default btn-clear">
      <input type="submit" value="Los!" class="btn btn-primary">
    </fieldset>
  </form>
</div>

ฉันมีปัญหาเดียวกันนี่คือวิธีแก้ปัญหาของฉัน:

<form method="post" class="form-inline form-horizontal" role="form">
        <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
        <div class="input-group col-sm-7">
            <input class="form-control" type="email" name="email" placeholder="your.email@example.com"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

นี่คือการสาธิต

คุณต้องลอยออกจากองค์ประกอบทั้งหมดดังนี้:

.form-group,
.form-group label,
.form-group input { float:left; display:inline;   }

ให้ขอบบางส่วนกับองค์ประกอบที่ต้องการ:

 .form-group { margin-right:5px }

และตั้งค่าความสูงของบรรทัดเดียวกับความสูงของฟิลด์:

.form-group label { line-height:--px; }

คุณสามารถดูได้จากคำตอบที่มีอยู่ว่าคำศัพท์ของ Bootstrap นั้นสับสน ถ้าคุณดูเอกสาร bootstrap คุณจะเห็นว่า class form-horizontalนั้นมีไว้สำหรับฟอร์มที่มีช่องด้านล่างซึ่งกันและกันนั่นคือสิ่งที่คนส่วนใหญ่คิดว่าเป็นรูปแบบแนวตั้ง ชั้นที่ถูกต้องสำหรับรูปแบบไปทั่วหน้าเป็นรูปแบบอินไลน์ พวกเขาอาจแนะนำระยะอินไลน์เพราะพวกเขาได้นำไปใช้แล้วระยะแนวนอน

คุณเห็นจากคำตอบบางส่วนที่นี่บางคนใช้ทั้งสองคลาสนี้ในรูปแบบเดียว! คนอื่นคิดว่าพวกเขาต้องการรูปแบบแนวนอนเมื่อพวกเขาต้องการแบบฟอร์มอินไลน์จริงๆ

ฉันขอแนะนำให้ทำตามที่อธิบายไว้ในเอกสาร Bootstrap:

<form class="form-inline">
  <div class="form-group">
    <label for="nameId">Name</label>
    <input type="text" class="form-control" id="nameId" placeholder="Jane Doe">
  </div>
</form>

ซึ่งผลิต:

คุณสามารถใช้แท็กช่วงในป้ายกำกับ

  <div class="form-group">
    <label for="rg-from">
      <span>Ab:</span> 
      <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
    </label>
  </div>

ฉันจัดการเพื่อแก้ไขปัญหาของฉันด้วย. ดูเหมือนว่าจะทำงานได้ดีและหมายความว่าฉันไม่ต้องเพิ่มความกว้างให้กับอินพุตทั้งหมดด้วยตนเอง

.form-inline .form-group input {
 width: auto; 
}

ฉันแน่ใจว่าคุณจะพบคำตอบของคุณแล้ว ... นี่คือคำตอบที่ฉันได้มา

นั่นคือ CSS ของฉัน

.field, .actions {
    margin-bottom: 15px;
  }
  .field label {
    float: left;
    width: 30%;
    text-align: right;
    padding-right: 10px;
    margin: 5px 0px 5px 0px;
  }
  .field input {
    width: 70%;
    margin: 0px;
  }

และ HTML ของฉัน ...

<h1>New customer</h1>
<div class="container form-center">
    <form accept-charset="UTF-8" action="/customers" class="new_customer" id="new_customer" method="post">
    <div style="margin:0;padding:0;display:inline"></div>

  <div class="field">
    <label for="customer_first_name">First name</label>
    <input class="form-control" id="customer_first_name" name="customer[first_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_last_name">Last name</label>
    <input class="form-control" id="customer_last_name" name="customer[last_name]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr1">Addr1</label>
    <input class="form-control" id="customer_addr1" name="customer[addr1]" type="text" />
  </div>
  <div class="field">
    <label for="customer_addr2">Addr2</label>
    <input class="form-control" id="customer_addr2" name="customer[addr2]" type="text" />
  </div>
  <div class="field">
    <label for="customer_city">City</label>
    <input class="form-control" id="customer_city" name="customer[city]" type="text" />
  </div>
  <div class="field">
    <label for="customer_pincode">Pincode</label>
    <input class="form-control" id="customer_pincode" name="customer[pincode]" type="text" />
  </div>
  <div class="field">
    <label for="customer_homephone">Homephone</label>
    <input class="form-control" id="customer_homephone" name="customer[homephone]" type="text" />
  </div>
  <div class="field">
    <label for="customer_mobile">Mobile</label>
    <input class="form-control" id="customer_mobile" name="customer[mobile]" type="text" />
  </div>
  <div class="actions">
    <input class="btn btn-primary btn-large btn-block" name="commit" type="submit" value="Create Customer" />
  </div>
</form>
</div>

สามารถดูตัวอย่างการทำงานได้ที่นี่ ... http://jsfiddle.net/s6Ujm/

PS: ฉันเป็นมือใหม่ด้วยเช่นกันนักออกแบบมืออาชีพ ... อย่าลังเลที่จะแบ่งปันความคิดเห็นของคุณ

ฉันคิดว่านี่คือสิ่งที่คุณต้องการจากเอกสาร bootstrap "รูปแบบแนวนอนใช้คลาสกริดที่กำหนดไว้ล่วงหน้าของ Bootstrap เพื่อจัดแนวป้ายกำกับและกลุ่มของตัวควบคุมฟอร์มในเค้าโครงแนวนอนโดยเพิ่ม. form-horizontal ให้กับฟอร์มการทำเช่นนั้นจะเปลี่ยน. form-groups เป็น ทำตัวเป็นแถวตารางดังนั้นไม่จำเป็นต้องใช้. row " ดังนั้น:

<form class="form-horizontal" role="form">
<div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
  <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
  <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
  <div class="col-sm-10">
    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <div class="checkbox">
      <label>
        <input type="checkbox"> Remember me
      </label>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-default">Sign in</button>
  </div>
</div>
</form>

ซอ: http://jsfiddle.net/beewayne/B9jj2/29/

<div class="control-group">
   <label class="control-label" for="firstname">First Name</label>
   <div class="controls">
    <input type="text" id="firstname" name="firstname"/>
   </div>
</div>

นอกจากนี้เราสามารถใช้มันได้ง่ายๆ

<label>First name:
    <input type="text" id="firstname" name="firstname"/>
</label>

ดูเหมือนว่าการเพิ่มstyle="width:inherit;"อินพุตจะทำงานได้ดี jsfiddle สาธิต

ไม่ต้องใช้ CSS สิ่งนี้ควรดูดีบนหน้าของคุณ คุณสามารถตั้งค่าcol-md-*ตามความต้องการของคุณ

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
                            <div class="col-md-12">
                                <form class="form-inline" role="form">
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputEmail" class="col-sm-3">Email</label>
                                            <input type="email" class="form-control col-sm-7" id="inputEmail" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="inputPassword" class="col-sm-3">Email</label>
                                            <input type="password" class="form-control col-sm-7" id="inputPassword" placeholder="Email">
                                        </div>
                                    </div>
                                    
                                    <button class="btn btn-primary">Button 1</button>
                                    &nbsp;&nbsp;
                                    <button class="btn btn-primary">Button 2</button>
                                </form>
                            </div>
                        </div>