Bootstrap 3.0: จะมีข้อความและอินพุตในบรรทัดเดียวกันได้อย่างไร?

ฉันกำลังเปลี่ยนเว็บไซต์ของฉันไปใช้ Bootstrap 3.0 ฉันมีปัญหาเกี่ยวกับการป้อนแบบฟอร์มและการจัดรูปแบบข้อความ สิ่งที่ทำงานใน Bootstrap 2 ไม่ทำงานใน Bootstrap 3

ฉันจะรับข้อความในบรรทัดเดียวกันก่อนและหลังการป้อนแบบฟอร์มได้อย่างไร ฉันได้ จำกัด ขอบเขตให้แคบลงเป็นปัญหากับคลาส 'form-control "ในตัวอย่างเวอร์ชัน Bootstrap 3

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

ตัวอย่างซอ JS

<div class="container ">
  <form>
      <h3> Format used to look like this in Bootstrap 2 </h3>
      <div class="row ">
          <label for="return1"><b>Return:</b></label>
          <input id="return1" name='return1' class=" input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return1' style='color:blue'> +/- 14 Days</span>
      </div>

       <br>   
       <br>   
           <h3> BootStrap 3 Version </h3>

      <div class="row">
          <label for="return2"><b>Return:</b></label>
          <input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return2' style='color:blue'> +/- 14 Days</span>
      </div>
  </form>

อัปเดต: ฉันเปลี่ยนรหัสเป็นสิ่งนี้ซึ่งใช้งานได้ แต่มีปัญหาในการจัดตำแหน่งในขณะนี้ ความคิดใด ๆ ?

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

ฉันจะใส่แต่ละองค์ประกอบที่คุณต้องการอินไลน์ไว้ใน col-md- * div แยกกันภายในแถวของคุณ หรือบังคับให้องค์ประกอบของคุณแสดงแบบอินไลน์ คลาส form-control จะแสดงบล็อกเนื่องจากเป็นวิธีที่ bootstrap คิดว่าควรทำ

ตรงจากเอกสารhttp://getbootstrap.com/css/#forms-horizontal

ใช้คลาสกริดที่กำหนดไว้ล่วงหน้าของ Bootstrap เพื่อจัดแนวป้ายกำกับและกลุ่มของตัวควบคุมฟอร์มในเค้าโครงแนวนอนโดยเพิ่ม.form-horizontalลงในฟอร์ม (ซึ่งไม่จำเป็นต้องเป็น a <form>) การดำเนินการดังกล่าว.form-groupsจะเปลี่ยนพฤติกรรมเป็นแถวตารางดังนั้นจึงไม่จำเป็นต้องใช้.rowที่จะประพฤติตัวเป็นแถวตารางจึงไม่มีความจำเป็นในการ

ตัวอย่าง:

<form class="form-horizontal">
  <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>

สิ่งที่คุณต้องการคือ.form-inlineชั้นเรียน คุณต้องระวังด้วยใหม่.form.inlineคลาสคุณต้องระบุความกว้างสำหรับแต่ละคอนโทรล

ลองดูที่นี้

สิ่งเหล่านี้ไม่ได้ผลสำหรับฉันต้องใช้ .form-control-staticชั้นเรียน

http://getbootstrap.com/css/#forms-controls-static

คุณสามารถทำได้ดังนี้:

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputType" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="input" placeholder="Input text">
        </div>
    </div>
</form>

ซอ

วิธีที่ฉันแก้ไขก็เพียงแค่เพิ่มการแทนที่สำหรับกล่องข้อความทั้งหมดของฉันบน css หลักของไซต์ของฉันดังนี้:

.form-control {
    display:initial !important;
}

เพียงแค่ให้แม่ของ div "class =" col-lg-12 ""

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

มันจะเป็น

<div class="form-group">
<div class="col-lg-12">
  <div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
</div>
</div>

โปรดตรวจสอบรหัสที่อัปเดตตามที่เราต้องใช้

 form-control-static not only form-control

http://jsfiddle.net/tusharD/58LCQ/34/

ขอบคุณด้วยความนับถือ

ใน Bootstrap 4 สำหรับองค์ประกอบแนวนอนคุณสามารถใช้.rowกับ.col-*-*คลาสเพื่อระบุความกว้างของป้ายกำกับและตัวควบคุมของคุณ ดูลิงค์นี้

และถ้าคุณต้องการแสดงชุดของป้ายชื่อตัวควบคุมฟอร์มและปุ่มบนแถวแนวนอนเดียวคุณสามารถใช้.form-inlineสำหรับข้อมูลเพิ่มเติมได้ที่ลิงค์นี้

หรือคุณสามารถทำได้:

<table>
  <tr>
    <td><b>Return:</b></td>
    <td><input id="return1" name='return1' 
              class=" input input-sm" style="width:150px"
              type="text" value='8/28/2013'></td>
  </tr>
</table>

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

ใช่ฉันรู้นั่นคือสิ่งที่เกี่ยวกับ bootstrap และคุณไม่ควรใช้โต๊ะ เพราะ DIV ดีกว่าตารางมาก แต่ปัญหาคือตารางแถวและเซลล์ทำงานได้จริง

ใช่ - ฉันรู้จริงๆว่ามี CSS zealots และปฏิกิริยากระตุกเข่าไม่เคยไม่เคยใช้ TABLE, TR และ TD ใช่ฉันรู้ว่า DIV class = "table" กับ DIV class = "row" และ DIV class = "cell" นั้นดีกว่ามาก ยกเว้นเมื่อไม่ได้ผลและมีหลายกรณี ฉันไม่เชื่อว่าผู้คนควรเพิกเฉยต่อสถานการณ์เหล่านั้น มีหลายครั้งที่ TABLE / TR / TD จะใช้งานได้ดีและไม่มีเหตุผลที่จะใช้วิธีการที่ซับซ้อนและเปราะบางกว่าเพียงเพราะถือว่าสง่างามกว่า นักพัฒนาควรเข้าใจว่าประโยชน์ของแนวทางต่างๆคืออะไรและการแลกเปลี่ยนและไม่มีกฎที่แน่นอนว่า DIV ดีกว่า

"ตรงประเด็น - จากการสนทนานี้ฉันแปลง tds และ trs ที่มีอยู่สองสามรายการเป็น div 45 นาทียุ่งกับเรื่องนี้โดยพยายามทำให้ทุกอย่างเรียงตัวติดกันและฉันก็ยอมแพ้ TD กลับมาใน 10 วินาทีต่อมา - ได้ผล - ทันที - ในทุกเบราว์เซอร์ไม่มีอะไรต้องทำอีกแล้วโปรดพยายามทำให้ฉันเข้าใจ - คุณมีเหตุผลที่เป็นไปได้อะไรที่อยากให้ฉันทำด้วยวิธีอื่น! " ดู [ https://stackoverflow.com/a/4278073/1758051]

และนี่: "

เค้าโครงควรจะง่าย ข้อเท็จจริงที่ว่ามีบทความที่เขียนเกี่ยวกับวิธีการสร้างโครงร่างสามคอลัมน์แบบไดนามิกพร้อมส่วนหัวและส่วนท้ายใน CSS แสดงให้เห็นว่าเป็นระบบการจัดวางที่ไม่ดี แน่นอนว่าคุณสามารถใช้งานได้ แต่มีบทความออนไลน์มากมายเกี่ยวกับวิธีการทำ ไม่มีบทความประเภทนี้สำหรับเค้าโครงที่คล้ายกันกับตารางเนื่องจากเห็นได้ชัดอย่างชัดเจน ไม่ว่าคุณจะพูดอะไรกับตารางและในแง่ของ CSS ความจริงข้อนี้ก็ยกเลิกทั้งหมด: เค้าโครงสามคอลัมน์พื้นฐานใน CSS มักเรียกว่า "The Holy Grail" "[ https://stackoverflow.com/a/4964107/ 1758051]

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