Bootstrap: จัดตำแหน่งอินพุตด้วยปุ่ม

299

ทำไมปุ่มและอินพุตไม่เข้ากันใน Bootstrap

ฉันลองอะไรที่เรียบง่ายเช่น:

<input type="text"/><button class="btn">button</button>

ปุ่ม5pxต่ำกว่าอินพุตใน chrome / firefox

ป้อนคำอธิบายรูปภาพที่นี่

css twitter-bootstrap

— pguardiario
แหล่งที่มา

551

Twitter Bootstrap 4

ใน Twitter Bootstrap 4 อินพุตและปุ่มสามารถจัดตำแหน่งโดยใช้คลาสinput-group-prependและinput-group-append(ดูที่https://getbootstrap.com/docs/4.0/components/input-group/#button-addons )

ปุ่มกลุ่มทางด้านซ้าย (เสริม)

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control">
</div>

ปุ่มกลุ่มทางด้านขวา (ผนวก)

<div class="input-group mb-3">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control">
</div>

Twitter Bootstrap 3

ดังที่แสดงในคำตอบโดย @abimelex อินพุตและปุ่มสามารถจัดตำแหน่งได้โดยใช้.input-groupคลาส (ดูที่http://getbootstrap.com/components/#input-groups-buttons )

ปุ่มกลุ่มด้านซ้าย

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
  <input type="text" class="form-control">
</div>

ปุ่มกลุ่มด้านขวา

<div class="input-group">
   <input type="text" class="form-control">
   <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
   </span>
</div>

การแก้ปัญหานี้ได้รับการเพิ่มที่จะให้คำตอบของฉันถึงวัน แต่โปรดติดของคุณขึ้นลงคะแนนให้กับคำตอบที่ได้รับจาก @abimelex

Twitter Bootstrap 2

Bootstrap นำเสนอ.input-appendคลาสซึ่งทำงานเป็นองค์ประกอบ wrapper และแก้ไขสิ่งนี้ให้คุณ:

<div class="input-append">
    <input name="search" id="search"/>
    <button class="btn">button</button>
</div>

@OleksiyKhilkevich ชี้ให้เห็นในคำตอบของเขามีวิธีที่สองในการจัดแนวinputและbuttonโดยใช้.form-horizontalคลาส:

<div class="form-horizontal">
    <input name="search" id="search"/>
    <button class="btn">button</button>
</div>

ความแตกต่าง

ความแตกต่างระหว่างสองคลาสนี้คือการที่.input-appendจะbuttonเพิ่มขึ้นกับinputองค์ประกอบ (ดังนั้นพวกเขาดูเหมือนว่าพวกเขาจะแนบ) ซึ่ง.form-horizontalจะวางช่องว่างระหว่างพวกเขา

-- บันทึก --

ในการอนุญาตให้องค์ประกอบinputและbuttonอยู่ติดกันโดยไม่มีการเว้นวรรคfont-sizeได้ถูกกำหนดเป็น0ใน.input-appendคลาส (ซึ่งจะลบระยะห่างสีขาวระหว่างinline-blockองค์ประกอบ) สิ่งนี้อาจมีผลเสียต่อขนาดตัวอักษรในinputองค์ประกอบหากคุณต้องการแทนที่ค่าเริ่มต้นโดยใช้emหรือ%การวัด

— ฉันปวดหัว
แหล่งที่มา

5

ขอบคุณสำหรับคำตอบของคุณ แต่ฉันรู้สึกว่ามีบางอย่างผิดปกติที่นี่ แน่นอนว่าฉันไม่ใช่คนแรกที่หวังว่าองค์ประกอบ bootstrap จะเรียงรายไปด้วยองค์ประกอบแบบฟอร์ม

— pguardiario

@pguardiario - คุณพูดถูก ดูเหมือนว่าผิดและหลังจากตบสมองของฉันฉันจำได้ว่า.input-appendชั้นเรียน

— หัวของฉันเจ็บ

1

ดูเหมือนว่าแปลกที่คุณจะต้องมีคลาส wrapper เพื่อทำสิ่งนี้ พวกเขาไม่ควรจัดเรียงตามค่าเริ่มต้น?

— opsb

2

@opsb หากพวกเขาใช้พื้นที่แนวตั้งในจำนวนเดียวกัน อย่างไรก็ตามช่องป้อนข้อมูลใน twitter bootstrap มีmargin-bottom: 9pxแต่ปุ่มไม่ทำดังนั้นจึงไม่ใช้พื้นที่แนวตั้งเดียวกัน เนื่องจากองค์ประกอบทั้งสองมีการmiddleจัดตำแหน่งแนวตั้งปุ่มจึงถูกชดเชยเนื่องจากความแตกต่าง การใช้.input-appendwrapper จะลบค่าขอบล่างนี้

— หัวของฉันเจ็บ

ใช่ฉันเดาว่ามันจะแตกเลย์เอาต์ของฟอร์มอื่น ๆ หากพวกเขามีความสูงแนวดิ่งเหมือนกัน

— opsb

187

คุณอาจใช้คุณสมบัติปุ่มกลุ่มอินพุตเพื่อใช้ปุ่มโดยตรงกับฟิลด์อินพุต

Bootstrap 3 และ 4

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
</div><!-- /input-group -->

ดูตัวอย่างเอกสารอีกมากมายจากBS4 Input-Group

ตัวอย่างสำหรับปุ่มกลุ่มอินพุต bs3

— Karl Adler
แหล่งที่มา

3

คนอื่นไม่ได้ทำงานให้ฉันคนนี้ก็ทำอย่างที่ฉันต้องการ ขอบคุณ.

— Colandus

1

สำหรับฉันมันไม่ทำงานหากสร้างแท็กพิเศษเพื่อจัดสรรชั้นเรียน แต่ใช้งานได้ถ้าฉันเพิ่มคลาสนั้นลงในแท็ก div:<div class="form-group input-group-btn">

— J0ANMM

คำตอบนี้ล้าสมัยสำหรับ BS4 ลองดูคำตอบของฉัน

— Alexander Kim

37

แค่หัวขึ้นดูเหมือนจะมีคลาส CSS พิเศษสำหรับการเรียกนี้ form-horizontal

อินพุทผนวกมีผลข้างเคียงอีกอันหนึ่งซึ่งจะลดขนาดแบบอักษรเป็นศูนย์

— Oleksiy Khilkevich
แหล่งที่มา

1

+1 จุดที่ดี - ฉันต้องดูว่าทำไมพวกเขาถึงใช้font-size: 0และเรียนรู้สิ่งใหม่ :) ขอบคุณ!

— หัวของฉันเจ็บ

30

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

ตัวอย่าง: http://jsfiddle.net/hSuy4/292/

<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>

.form แนวนอน = จัดแนวขวาของป้ายชื่อและลอยไปทางซ้ายเพื่อให้ปรากฏบนบรรทัดเดียวกันกับตัวควบคุมที่ดีกว่าสำหรับเค้าโครงแบบฟอร์มคอลัมน์ 2 คอลัมน์

(e.g. 
Label 1: [textbox]
Label 2: [textbox]
     : [button]
)

ตัวอย่าง: http://twitter.github.io/bootstrap/base-css.html#forms

— ZEESHAN ARSHAD
แหล่งที่มา

2

ฉันสามารถยืนยันได้ว่าform-inlineเหมาะกับ Bootstrap 3 ขอบคุณ

— austin

Fantastic! สิ่งที่ฉันต้องการสำหรับรูปแบบที่ลำบาก!

— its_notjack

ดูเหมือนว่า. form-inline จะทำงานได้ภายในวิวพอร์ตอย่างน้อย 768px: w3schools.com/bootstrap/bootstrap_forms.asp

— anemaria20

16

ฉันพยายามเหนือกว่าและจบลงด้วยการเปลี่ยนแปลงเล็กน้อยซึ่งฉันต้องการแบ่งปัน นี่คือรหัสที่ใช้งานได้สำหรับฉัน (ค้นหาภาพหน้าจอที่แนบมา):

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search text">
    <span class="input-group-btn" style="width:0;">
        <button class="btn btn-default" type="button">Go!</button>
    </span>
</div>

หากคุณต้องการให้มันใช้งานได้เพียงใช้โค้ดด้านล่างในโปรแกรมแก้ไข:

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
    </head>
    <body>
        <div class="container body-content">
            <div class="form-horizontal">
              <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search text">
                  <span class="input-group-btn" style="width:0;">
                      <button class="btn btn-default" type="button">Go!</button>
                  </span>
              </div>
            </div>
        </div>
    </body>
</html>

หวังว่านี่จะช่วยได้

— Abhimanyu
แหล่งที่มา

Bootstrap รุ่นนี้ใช้ทำอะไร? แล้วปัญหาอะไรที่ทำให้ไม่ได้ใช้style="width:0;"?

— Karl Adler

หากคุณไม่ได้ใช้ความกว้าง: 0 จะทำให้ความกว้างของหน้าเต็ม

— Abhimanyu

วิธี bootstrap จะห่อด้วย col-element เหมือน<div class="col-md-4">ไม่จำเป็นต้องwidth: 0

— Karl Adler

ฉันตั้งค่าเพราะฉันไม่ต้องการให้ตัวควบคุมอินพุตใช้ความกว้างเต็มหน้าจอ

— Abhimanyu

6

ฉันยังดิ้นรนกับปัญหาเดียวกัน คลาสบูตสแตรปที่ฉันใช้นั้นไม่ทำงานสำหรับฉัน ฉันมาด้วยวิธีแก้ปัญหาดังต่อไปนี้:

<form action='...' method='POST' class='form-group'>
  <div class="form-horizontal">
    <input type="text" name="..." 
        class="form-control" 
        placeholder="Search People..."
        style="width:280px;max-width:280px;display:inline-block"/>

    <button type="submit" 
        class="btn btn-primary" 
        style="margin-left:-8px;margin-top:-2px;min-height:36px;">
      <i class="glyphicon glyphicon-search"></i>
     </button>
  </div>
</form>

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

ต่อไปนี้เป็นผลลัพธ์:

— Bikash Bishwokarma
แหล่งที่มา

5

Bootstrap 4:

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button class="btn btn-success" type="button">Button</button>
  </div>
</div>

https://getbootstrap.com/docs/4.0/components/input-group/

— อเล็กซานเดอร์คิม
แหล่งที่มา

4

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

— นักออกแบบ Ashu
แหล่งที่มา

3

ฉันลองใช้รหัสข้างต้นทั้งหมดและไม่มีใครแก้ไขปัญหาของฉันได้ นี่คือสิ่งที่ใช้ได้ผลสำหรับฉัน ฉันใช้ input-group-addon

<div class = "input-group">
  <span class = "input-group-addon">Go</span>
  <input type = "text" class = "form-control" placeholder="you are the man!">
</div>

— kupaff
แหล่งที่มา

1

ไม่เกี่ยวข้องโดยตรงนอกจากว่าคุณจะมีรหัสที่คล้ายกัน แต่ฉันเพิ่งสังเกตเห็นพฤติกรรมแปลก ๆ ที่จะทำให้ฟอร์มอินไลน์ bootstrap 3.3.7

ฉันไม่ได้ใช้แถวและเซลล์สำหรับสิ่งนี้เนื่องจากเป็นโครงการเดสก์ท็อปหากแท็กเปิดอยู่ด้านล่างตาราง (ในกรณีนี้):

<table class="form-inline"> 
<form> 
<tr>

องค์ประกอบแบบฟอร์มจะสแต็ค

สลับและเรียงกันอย่างเหมาะสม

<form>
<table class="form-inline">
<tr>

Safari 10.0.2 และ Chrome ล่าสุดไม่ได้สร้างความแตกต่างใด ๆ บางทีเลย์เอาต์ของฉันผิด แต่มันก็ไม่ให้อภัย

— Trond
แหล่งที่มา

1

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

<input style="width:65%;float:left"class="btn btn-primary" type="text" name="name"> 
<div style="width:8%;float:left">&nbsp;</div>
<button class="btn btn-default" type="button">Go!</button>
<div class="clearfix" style="margin-bottom:10px"> </div>

— rashedcs
แหล่งที่มา

-1

style="padding-top: 8px"

ใช้สิ่งนี้เพื่อเลื่อน div ของคุณขึ้นหรือลงในแถวของคุณ งานมหัศจรรย์สำหรับฉัน

— ซัคเจ
แหล่งที่มา