ปุ่มความกว้างคงที่พร้อม Bootstrap

Bootstrap รองรับปุ่มที่มีความกว้างคงที่หรือไม่? ขณะนี้ถ้าฉันมี 2 ปุ่ม "บันทึก" และ "ดาวน์โหลด" ขนาดของปุ่มจะเปลี่ยนไปตามเนื้อหา

อะไรคือวิธีที่เหมาะสมในการขยาย Bootstrap?

คุณยังสามารถใช้.btn-blockคลาสบนปุ่มเพื่อขยายความกว้างของพาเรนต์

หากผู้ปกครองเป็นองค์ประกอบความกว้างคงที่ปุ่มจะขยายเพื่อรับความกว้างทั้งหมด คุณสามารถใช้มาร์กอัปที่มีอยู่กับภาชนะเพื่อให้แน่ใจว่าปุ่มคงที่ / ของเหลวใช้พื้นที่ว่างที่จำเป็นเท่านั้น

<div class="span2">
<p><button class="btn btn-primary btn-block">Save</button></p>
<p><button class="btn btn-success btn-block">Download</button></p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="span2">
  <p><button class="btn btn-primary btn-block">Save</button></p>
  <p><button class="btn btn-success btn-block">Download</button></p>
</div>

ในการทำเช่นนี้คุณสามารถเห็นความกว้างที่คุณรู้สึกว่าใช้ได้สำหรับปุ่มทั้งสองแล้วสร้างคลาสแบบกำหนดเองที่มีความกว้างและเพิ่มลงในปุ่มของคุณเช่น:

CSS

.custom {
    width: 78px !important;
}

ฉันสามารถใช้คลาสนี้และเพิ่มไปยังปุ่มดังนี้:

<p><button href="#" class="btn btn-primary custom">Save</button></p>
<p><button href="#" class="btn btn-success custom">Download</button></p>

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

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

หากคุณวางปุ่มใน div ด้วยคลาส "btn-group" ปุ่มด้านในจะยืดให้มีขนาดเท่ากับปุ่มที่ใหญ่ที่สุด

เช่น:

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div> 

กลุ่มปุ่ม Bootstrap

สำหรับปุ่มของคุณคุณสามารถสร้างตัวเลือก CSS อื่นสำหรับคลาสพิเศษของปุ่มเหล่านั้นด้วยความกว้างขั้นต่ำและความกว้างสูงสุดที่ระบุ ดังนั้นหากปุ่มของคุณคือ

<button class="save_button">Save</button>

ในไฟล์ Bootstrap CSS ของคุณคุณสามารถสร้างสิ่งที่ชอบ

.save_button {
    min-width: 80px;
    max-width: 80px;
}

วิธีนี้ควรอยู่ที่ 80px เสมอแม้ว่าคุณจะมีการออกแบบที่ตอบสนองได้ดี

เท่าที่วิธีที่ถูกต้องในการขยาย Bootstrap ไปดูที่หัวข้อนี้:

การขยาย Bootstrap

ด้วย BS 4 คุณสามารถใช้การปรับขนาดและใช้ w-100 เพื่อให้ปุ่มสามารถครอบครองความกว้างทั้งหมดของคอนเทนเนอร์หลัก

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  Using btn-block
</p>
<div class="container-fluid">
  <div class="btn-group col" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-secondary">Left</button>
    <button type="button" class="btn btn-outline-secondary btn-block">Middle</button>
    <button type="button" class="btn btn-outline-secondary">Right</button>
  </div>
</div>

<p>
  Using w-100
</p>
<div class="container-fluid">
  <div class="btn-group col" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-secondary">Left</button>
    <button type="button" class="btn btn-outline-secondary w-100">Middle</button>
    <button type="button" class="btn btn-outline-secondary">Right</button>
  </div>
</div>

การขยาย @ kravits88 คำตอบ:

นี่จะเป็นการยืดปุ่มให้พอดีกับความกว้างทั้งหมด:

<div className="btn-group-justified">
<div className="btn-group">
  <button type="button" className="btn btn-primary">SAVE MY DEAR!</button>
</div>
<div className="btn-group">
  <button type="button" className="btn btn-default">CANCEL</button>
</div>
</div>

btn-group-justified และ btn-group ใช้งานได้เฉพาะกับเนื้อหาแบบสแตติก แต่ไม่ได้อยู่บนปุ่มที่สร้างขึ้นแบบไดนามิกและการแก้ไขด้วยปุ่มใน css นั้นไม่สามารถใช้งานได้เนื่องจากมันยังคงความกว้างเท่าเดิมแม้เนื้อหาทั้งหมดจะสั้น

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

var bwidth=0
$("button.btnGroup").each(function(i,v){
    if($(v).width()>bwidth) bwidth=$(v).width();
});
$("button.btnGroup").width(bwidth);

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

1) ไม่ใช่แฮ็ค (การตั้งค่าความกว้างขั้นต่ำและความกว้างสูงสุดเท่ากันคือแฮ็ค)

2) อย่าใช้! แท็กสำคัญซึ่งเป็นแนวปฏิบัติที่ไม่ดี

3) ใช้ความกว้างดังนั้นจะสามารถอ่านได้มากและทุกคนที่เข้าใจว่าการเรียงซ้อนใน CSS จะเห็นว่าเกิดอะไรขึ้น (อาจแสดงความคิดเห็น CSS สำหรับสิ่งนี้)

4) รวมตัวเลือกของคุณที่ใช้กับโหนดเป้าหมายของคุณเพื่อความแม่นยำที่เพิ่มขึ้น

.parent_element .btn.btn-primary.save-button {
    width: 80px;
}

เพิ่งมาถึงความต้องการเดียวกันและไม่ได้ satified กับการกำหนดความกว้างคงที่

ดังนั้นทำด้วย jquery:

    var max = Math.max ($("#share_cancel").width (), $("#share_commit").width ());
    $("#share_cancel").width (max);
    $("#share_commit").width (max); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <button type="button" class="btn btn-secondary" id="share_cancel">SHORT</button>
    <button type="button" class="btn btn-success" id="share_commit">LOOOOOOOOONG</button>

วิธีที่ดีที่สุดในการแก้ปัญหาของคุณคือใช้ปุ่มบล็อกbtn-block ที่มีความกว้างคอลัมน์ที่ต้องการ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


    <div class="col-md-12">
      <button class="btn btn-primary btn-block">Save</button>
    </div>
    <div class="col-md-12">
        <button class="btn btn-success btn-block">Download</button>
    </div>

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

    function EqualizeButtons(parentElementId) {

    var longest = 0; 
    var element = $(parentElementId);

    element.find(".btn:not(.button-controlled)").each(function () {
        $(this).addClass('button-controlled');
        var width = $(this).width();
        if (longest < width) longest = width;

    }).promise().done(function () {
        $('.button-controlled').width(longest);
    });
}

มันทำงานเหมือนจับใจ

นี่อาจเป็นวิธีแก้ปัญหาที่โง่ แต่ฉันกำลังมองหาวิธีแก้ปัญหาและขี้เกียจ

อย่างไรก็ตามการใช้ input class = "btn ... " ... แทนการใช้ปุ่มและ padding value = attribute พร้อมช่องว่างเพื่อให้มีความกว้างเท่ากันทำงานได้ดี

เช่น :

<input type="submit" class="btn btn-primary" value="   Calculate   "/>    
<input type="reset" class="btn btn-primary"value="     Reset       "/>

ฉันไม่ได้ใช้ bootstrap มาตลอดและอาจมีเหตุผลที่ดีที่จะไม่ใช้วิธีนี้ แต่คิดว่าฉันอาจแชร์ได้เช่นกัน