Đã sửa các nút chiều rộng bằng Bootstrap

Bootstrap có hỗ trợ các nút chiều rộng cố định không? Hiện tại nếu tôi có 2 nút, "Lưu" và "Tải xuống", kích thước nút thay đổi dựa trên nội dung.

Ngoài ra cách mở rộng Bootstrap đúng là gì?

Bạn cũng có thể sử dụng .btn-blocklớp trên nút, để nó mở rộng theo chiều rộng của cha mẹ.

Nếu cha là phần tử chiều rộng cố định, nút sẽ mở rộng để lấy toàn bộ chiều rộng. Bạn có thể áp dụng đánh dấu hiện có vào thùng chứa để đảm bảo các nút cố định / chất lỏng chỉ chiếm không gian cần thiết.

<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>

Để làm điều này, bạn có thể tạo ra một chiều rộng mà bạn cảm thấy ổn cho cả hai nút và sau đó tạo một lớp tùy chỉnh với chiều rộng và thêm nó vào các nút của bạn như sau:

CSS

.custom {
    width: 78px !important;
}

Sau đó tôi có thể sử dụng lớp này và thêm nó vào các nút như vậy:

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

Bản trình diễn: http://jsfiddle.net/yNsxU/

Bạn có thể lấy lớp tùy chỉnh mà bạn tạo và đặt nó bên trong biểu định kiểu của riêng bạn, mà bạn tải sau biểu định kiểu bootstrap. Chúng tôi làm điều này bởi vì bất kỳ thay đổi nào bạn đặt bên trong biểu định kiểu bootstrap có thể vô tình bị mất khi bạn cập nhật khung, chúng tôi cũng muốn các thay đổi của bạn được ưu tiên hơn các giá trị mặc định.

Nếu bạn đặt các nút của mình bên trong div với lớp "btn-group", các nút bên trong sẽ kéo dài cùng kích thước với nút lớn nhất.

ví dụ:

<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> 

Nhóm nút Bootstrap

Đối với các nút của bạn, bạn có thể tạo một bộ chọn CSS khác cho các lớp nút đặc biệt đó với chiều rộng tối thiểu và chiều rộng tối đa được chỉ định. Vì vậy, nếu nút của bạn là

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

Trong tệp CSS Bootstrap của bạn, bạn có thể tạo một cái gì đó như

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

Bằng cách này, nó sẽ luôn duy trì 80px ngay cả khi bạn có thiết kế đáp ứng.

Theo đúng cách mở rộng Bootstrap, hãy xem chủ đề này:

Mở rộng Bootstrap

Với BS 4, bạn cũng có thể sử dụng kích thước và áp dụng w-100 để nút có thể chiếm toàn bộ chiều rộng của thùng chứa cha.

<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>

Mở rộng câu trả lời @ kravits88:

Điều này sẽ kéo dài các nút để phù hợp với toàn bộ chiều rộng:

<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 và btn-group chỉ hoạt động cho nội dung tĩnh nhưng không hoạt động trên các nút được tạo động và việc cố định bằng nút trong css là không thực tế vì nó vẫn ở cùng độ rộng, thậm chí tất cả nội dung đều ngắn.

Giải pháp của tôi: đặt cùng một lớp vào nhóm các nút sau đó lặp lại cho tất cả chúng, lấy chiều rộng của nút dài nhất và áp dụng nó cho tất cả

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

Nút chiều rộng khối có thể dễ dàng trở thành nút phản hồi nếu thùng chứa phụ phản hồi. Tôi nghĩ rằng việc sử dụng kết hợp chiều rộng cố định và đường dẫn chọn chi tiết hơn thay vì! Quan trọng vì:

1) Nó không phải là hack (thiết lập chiều rộng tối thiểu và chiều rộng tối đa giống nhau là hack)

2) Không sử dụng thẻ quan trọng! Đó là thông lệ xấu

3) Sử dụng chiều rộng nên sẽ rất dễ đọc và bất cứ ai hiểu cách hoạt động xếp tầng trong CSS sẽ thấy những gì đang diễn ra (có thể để lại nhận xét CSS cho việc này?)

4) Kết hợp các bộ chọn của bạn áp dụng cho nút được nhắm mục tiêu của bạn để tăng độ chính xác

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

Chỉ cần có cùng một nhu cầu và không được bão hòa với việc xác định chiều rộng cố định.

Nó cũng vậy với 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>

Cách tốt nhất để giải quyết vấn đề của bạn là sử dụng khối btn-block với độ rộng cột mong muốn.

<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>

Ở đây tôi tìm thấy một giải pháp bằng cách so sánh các nút trong thành phần nhóm nút. Giải pháp đơn giản là lấy cái có chiều rộng lớn nhất và đặt chiều rộng cho các nút khác. Vì vậy, chúng có thể có chiều rộng bằng nhau.

    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);
    });
}

Nó làm việc như một say mê.

Đây có thể là một giải pháp ngớ ngẩn, nhưng tôi đã tìm kiếm một giải pháp cho vấn đề này và đã lười biếng.

Dù sao, sử dụng input class = "btn ..." ... thay vì nút và đệm thuộc tính value = với khoảng trắng để tất cả chúng có cùng chiều rộng hoạt động khá tốt.

ví dụ :

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

Tôi đã không sử dụng bootstrap lâu như vậy và có lẽ có một lý do chính đáng để không sử dụng phương pháp này, nhưng nghĩ rằng tôi cũng có thể chia sẻ