ฉันจะทำช่องว่างระหว่างสองปุ่มใน div เดียวกันได้อย่างไร

วิธีที่ดีที่สุดในการเว้นวรรคแนวนอนปุ่ม Bootstrap คืออะไร?

ในขณะที่ปุ่มสัมผัส:

<div class="btn-group">
    <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
        <i class="icon-in-button"></i>  
        Add to list
        <span class="caret"/>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">here</a>
        </li>
        <li>
            <a href="#">new</a>
        </li>
    </ul>
    <button class="btn btn-info">
        <i class="icon-in-button"></i>  
        more
    </button>
</div>

jsfiddle แสดงปัญหา: http://jsfiddle.net/hhimanshu/sYLRq/4/

ใส่ไว้ภายในbtn-toolbarหรือภาชนะอื่น ๆ btn-groupที่ไม่ btn-groupเข้าร่วมด้วยกัน ข้อมูลเพิ่มเติมเกี่ยวกับเงินทุนเอกสารเอกสาร

แก้ไข: คำถามเดิมเป็นเงินทุน 2.x แต่เดียวกันยังคงถูกต้องสำหรับเงินทุน 3และเงินทุน 4

ในBootstrap 4คุณจะต้องเพิ่มระยะห่างที่เหมาะสมให้กับกลุ่มของคุณโดยใช้คลาสยูทิลิตี้เช่น mx-2

เพียงแค่ใส่ปุ่มในชั้นเรียน (class = "BTN แถบเครื่องมือ") ในฐานะบอกครับมิโรสลาฟ Popovic.It ทำงานที่น่ากลัว

<div class="btn-toolbar">
  <button type="button" id="btnSubmit" class="btn btn-primary btn-sm">Submit</button>
  <button type="button" id="btnCancel" class="btn btn-primary btn-sm">Cancel</button>
</div>

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

คุณควรใช้ bootstrap v.4

<div class="form-group row">
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn1">
    </div>
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn2">
    </div>
</div>

สิ่งที่แนะนำให้ Dragan B เป็นวิธีที่ถูกต้องสำหรับ Bootstrap 4 ฉันได้ยกตัวอย่างหนึ่งตัวอย่างด้านล่าง เช่น mr-3 คือระยะขอบขวา: 1rem!

<div class="btn-toolbar pull-right">
   <button type="button" class="btn mr-3">btn1</button>
   <button type="button" class="btn mr-3">btn2</button>
   <button type="button" class="btn">btn3</button>
</div>

ป.ล. : ในกรณีของฉันฉันต้องการให้ปุ่มของฉันแสดงที่ด้านขวาของหน้าจอและจากนั้นดึงขวา

วิธีที่ง่ายที่สุดในสถานการณ์ส่วนใหญ่เป็นอัตรากำไรขั้นต้น

คุณสามารถทำอะไรได้บ้าง:

button{
  margin: 13px 12px 12px 10px;
}

หรือ

button{
  margin: 13px;
}

ฉันใช้ปลั๊กอิน Bootstrap 4 ปุ่ม ( https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin ) และเพิ่มคลาสที่ปัดเศษลงในป้ายกำกับและคลาสmx-1ไปที่ปุ่มตรงกลางเพื่อให้บรรลุ รูปลักษณ์และความรู้สึกที่ต้องการของปุ่มตัวเลือกแยกต่างหาก การใช้คลาสbtn-toolbarทำให้วงกลมปุ่มตัวเลือกปรากฏขึ้นสำหรับฉันซึ่งไม่ใช่สิ่งที่ฉันต้องการ หวังว่านี่จะช่วยใครซักคน

        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary active rounded">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
            </label>
            <label class="btn btn-secondary rounded mx-1">
                <input type="radio" name="options" id="option2" autocomplete="off"> Radio
            </label>
            <label class="btn btn-secondary rounded">
                <input type="radio" name="options" id="option3" autocomplete="off"> Radio
            </label>
        </div>

วิธีการที่จะบรรลุเป้าหมายนี้ก็คือการเพิ่มระดับ .btn พื้นที่ในปุ่มของคุณ

  <button type="button" class="btn btn-outline-danger btn-space"
  </button>
  <button type="button" class="btn btn-outline-primary btn-space"
  </button>

และกำหนดคลาสนี้ดังนี้

.btn-space {
    margin-right: 15px;
}

ที่จริงฉันวิ่งเข้าไปในข้อกำหนดเดียวกัน ฉันใช้ CSS override แบบนี้

.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }

ถ้าใช้เงินทุนคุณสามารถเปลี่ยนที่มีสไตล์ที่ชอบ: ถ้าคุณต้องการที่เฉพาะในหน้าหนึ่งแล้ว betwen แท็กหัวเพิ่ม .btn กลุ่ม BTN {ขอบขวา: 1rem;}

ถ้าเป็นสำหรับเว็บไซต์ทั้งหมดเพิ่มไฟล์ css

วิธีแก้ปัญหา Dragan B. ถูกต้อง ในกรณีของฉันฉันต้องการปุ่มที่จะเว้นระยะในแนวตั้งเมื่อซ้อนดังนั้นฉันจึงเพิ่มคุณสมบัติ mb-2 ให้กับพวกเขา

<div class="btn-toolbar">
   <button type="button" class="btn btn-primary mr-2 mb-2">First</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Second</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Third</button>
</div>

ฉันลงเอยด้วยการทำสิ่งที่คล้ายกับที่ทำในสิ่งที่ฉันชอบ แต่ฉันต้องหาระยะห่างสำหรับลักษณะที่แตกต่างออกไปเล็กน้อย

col-xเรียนในการบูตสามารถช่วยชีวิตแน่นอน ฉันลงเอยด้วยการทำสิ่งที่คล้ายกับนี้:

<div class="row col-12">
    <div class="col-3">Title</div>
</div>
<div class="row col-12">
    <div class="col-3">Bootstrap Switch</div>
<div>

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

(หมายเหตุด้านข้าง: ฉันต้องการให้นี่เป็นความคิดเห็นในลิงก์ด้านบน แต่ชื่อเสียงของฉันไม่สูงพอ)