Làm cách nào để các nút Twitter Bootstrap của tôi được căn chỉnh đúng?

Tôi có một bản demo đơn giản ở đây:

http://jsfiddle.net/HdeZ3/1/

<ul>
    <li>One <input class="btn pull-right" value="test"></li>
    <li>Two <input class="btn pull-right" value="test2"></li>
</ul>

Tôi có một danh sách không có thứ tự và cho mỗi mục danh sách tôi muốn có văn bản ở bên trái và sau đó là nút căn phải. Tôi đã cố gắng sử dụng pull-right nhưng điều này hoàn toàn làm rối loạn sự liên kết. Tôi đang làm gì sai?

Chèn pull-rightvào thuộc tính lớp và để bootstrap sắp xếp các nút.

Đối với Bootstrap 2.3 , xem: http://getbootstrap.com/2.3.2/components.html#misc > Các lớp trợ giúp> .pull-right.

Đối với Bootstrap 3 , hãy xem: https://getbootstrap.com/docs/3.3/css/#helper-groupes > Các lớp trợ giúp.

Đối với Bootstrap 4 , hãy xem: https://getbootstrap.com/docs/4.0/utilities/float/#responsive

Các pull-rightlệnh đã được gỡ bỏ và thay thế bằng float-righthoặc để chungfloat-{sm,md,lg,xl}-{left,right,none}

Trong twitter bootstrap 3, hãy thử lớp pull-right

class="btn pull-right"

Lớp "pull-right" có thể không đúng cách vì trong sử dụng "float: right" thay vì căn chỉnh văn bản.

Kiểm tra tệp css bootstrap 3 tôi thấy lớp "text-right" trên dòng 457. Lớp này phải là cách đúng để căn chỉnh văn bản sang phải.

Một số mã:

<div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>

Cập nhật 2019 - Bootstrap 4.0.0

Các pull-rightlớp học tại là float-righttrong Bootstrap 4 ...

    <div class="row">
        <div class="col-12">One <input type="button" class="btn float-right" value="test"></div>
        <div class="col-12">Two <input type="button" class="btn float-right" value="test"></div>
    </div>

http://www.codeply.com/go/nTobetXAwb

Tốt hơn hết là không căn chỉnh danh sách ul và sử dụng các phần tử khối cho các hàng.

Được float-rightvẫn không làm việc?

Hãy nhớ rằng Bootstrap 4 hiện là flexbox và nhiều yếu tố display:flexcó thể ngăn float-right hoạt động. Trong một số trường hợp, các lớp sử dụng như align-self-endhoặc ml-autolàm việc để sắp xếp các phần tử bên trong một hộp chứa flexbox như Bootstrap 4 .row, Card hoặc Nav.

Cũng nên nhớ rằng text-rightvẫn hoạt động trên các yếu tố nội tuyến.

Bootstrap 4 căn chỉnh đúng ví dụ

Bootstrap 3

Sử dụng pull-rightlớp học.

Sử dụng buttonthẻ thay vì inputvà sử dụng pull-rightlớp.

pull-right lớp hoàn toàn làm rối cả hai nút của bạn, nhưng bạn có thể khắc phục điều này bằng cách xác định lề tùy chỉnh ở bên phải.

<button class="btn btn-primary pull-right btn-sm RbtnMargin" type="button">Save</button>
<button class="btn btn-primary pull-right btn-sm"  type="button">Cancel</button>

Sau đó sử dụng CSS sau đây cho lớp

.RbtnMargin { margin-left: 5px; }

Thêm vào câu trả lời được chấp nhận, khi làm việc trong các thùng chứa và cột được xây dựng trong phần đệm từ bootstrap, đôi khi tôi có một cột được kéo dài đầy đủ với một div con thực hiện theo cách đó.

<div class="row">
  <div class="col-sm-12">
      <div class="pull-right">
            <p>I am right aligned, factoring in container column padding</p>
      </div>
  </div>
</div>

Cách khác, có tất cả các cột của bạn cộng với tổng số cột lưới của bạn (12 theo mặc định) cùng với việc cột đầu tiên được bù.

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
        This content and its sibling..
  </div>
  <div class="col-sm-4">
        are right aligned as a whole thanks to the offset on the first column and the sum of the columns used is the total available (12).
  </div>
</div>

Xin lỗi vì đã trả lời một câu hỏi đã trả lời cũ hơn, nhưng tôi nghĩ rằng tôi đã chỉ ra một vài lý do khiến jsfiddle của bạn không hoạt động, trong trường hợp những người khác kiểm tra nó và tự hỏi tại sao lớp kéo phải như được mô tả trong câu trả lời được chấp nhận không Không làm việc ở đó.

1. url đến tệp bootstrap.css không hợp lệ. (có lẽ nó hoạt động khi bạn đặt câu hỏi).
2. bạn nên thêm thuộc tính: type = "button" vào thành phần đầu vào của mình, hoặc nó sẽ không được hiển thị dưới dạng nút - nó sẽ được hiển thị dưới dạng hộp đầu vào. Tốt hơn nữa, sử dụng các <button>yếu tố thay thế.
3. Ngoài ra, vì kéo phải sử dụng phao, bạn sẽ nhận được một số cách bố trí nút đáng kinh ngạc vì mỗi LI không có đủ chiều cao để phù hợp với chiều cao của nút. Thêm một số css chiều cao dòng hoặc chiều cao tối thiểu vào LI sẽ giải quyết điều đó.

fiddle làm việc: http://jsfiddle.net/3ejqufp6/

<ul>
  <li>One <input type="button" class="btn pull-right" value="test"/></li>
  <li>Two <input type="button" class="btn pull-right" value="test2"/></li>
</ul>

(Tôi cũng đã thêm một chiều rộng tối thiểu cho các nút vì tôi không thể chịu được cái nhìn của một cái nhìn hợp lý rách rưới đối với các nút vì độ rộng khác nhau :))

Sử dụng trình pull-righttrợ giúp Bootstrap không hiệu quả với chúng tôi vì nó sử dụng float: right, điều này buộc inline-blockcác yếu tố trở thànhblock . Và khi .btntrở thành block, họ mất đi lợi thế tự nhiêninline-block đang cung cấp cho chúng như các yếu tố gần như văn bản.

Vì vậy, thay vào đó chúng tôi đã sử dụng direction: rtl;phần tử cha, điều này làm cho văn bản bên trong phần tử đó được bố trí từ phải sang trái và điều đó cũng khiến inline-blockcác phần tử bố trí từ phải sang trái. Bạn có thể sử dụng LESS như sau để ngăn trẻ em ra ngoài rtl:

/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}

và sử dụng nó như:

<div class="btn-container-right">
    <button class="btn">Click Me</button>
</div>

Trong Bootstrap 4 : Hãy thử cách này với Flexbox. Xem tài liệu trong getbootstrap

<div class="row">
  <div class="col-md">
    <div class="d-flex justify-content-end">
      <button type="button" class="btn btn-default">Example 1</button>
      <button type="button" class="btn btn-default">Example 2</button>
    </div>
  </div>
</div>

Kéo bên phải đã được khấu hao kể từ phiên bản 3.1. Chỉ cần một cái đầu lên.

http://getbootstrap.com/components/#callout-dropdown-pull-right

Áp dụng pull-rightlớp cho nút. http://getbootstrap.com/css/#helper-groupes-floats -> Các lớp trợ giúp

Liên kết này sẽ giúp

Bây giờ bạn cần thêm .dropdown-menu-right vào phần tử menu .dropdown-hiện có. kéo phải không được hỗ trợ nữa. Thêm thông tin ở đây http://getbootstrap.com/components/#btn-dropdowns

Bạn có thể thử CSS tùy chỉnh sang một bên CSS bootstrap để xem có thay đổi gì không. Thử

.move-rigth{
    display: block;
    float: right;
}

Nếu nó hoạt động thì bạn có thể thử thao tác những gì bạn có hoặc thêm định dạng khác vào đây và đạt được những gì bạn mong muốn. Bởi vì bạn đang sử dụng bootstrap không có nghĩa là nếu nó không cung cấp cho bạn những gì bạn muốn thì bạn chỉ cần quản lý nó. Bạn đang làm việc với các mã của mình và vì vậy bạn ra lệnh cho nó làm như bạn nói. Chúc mừng!

<ul>
    <li class="span4">One <input class="btn btn-small" value="test"></li>
    <li class="span4">Two <input class="btn btn-small " value="test2"</li>
</ul>

tôi chỉ sử dụng layout..apply style cho li ..

hoặc là

<ul>
    <li>One <input class="btn" value="test"></li>
    <li>Two <input class="btn" value="test2"</li>
</ul>

trong CSS

li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}

bạn cũng có thể sử dụng các cột trống để cung cấp khoảng trắng ở bên trái

giống

<div class="row">
    <div class="col-md-8"></div>  <!-- blank space increase or decrease it by column # -->
        <div class="col-md-4">
            <button id="saveedit" name="saveedit" class="btn btn-success">Save</button>
        </div>
</div>

Bản demo :: Bản demo của Jsfiddle

Từ Bootstrap V3.3.1 , kiểu CSS sau sẽ giải quyết vấn đề này

.modal-open{
    padding-right: 0 !important;
}

Lưu ý: Tôi đã thử tất cả các đề xuất trong các bài đăng ở trên và tất cả các địa chỉ phiên bản cũ hơn và không cung cấp bản sửa lỗi cho phiên bản bootstrap mới.

cho tài liệu bootstrap 4

  <div class="row justify-content-end">
    <div class="col-4">
      Start of the row
    </div>
    <div class="col-4">
      End of the row
    </div>
  </div>