Як я можу змусити свої кнопки завантаження Twitter правильно вирівняти?

У мене тут проста демонстрація:

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>

У мене є не упорядкований список, і для кожного елемента списку я хочу мати текст ліворуч, а потім праву кнопку вирівнювання. Я спробував використовувати pull-right, але це повністю зіпсувало вирівнювання. Що я роблю неправильно?

Вставте pull-rightв атрибут класу і дозвольте завантажувальному пристрою розташувати кнопки.

Про Bootstrap 2.3 див .: http://getbootstrap.com/2.3.2/components.html#misc > Допоміжні класи> .pull-right.

Про Bootstrap 3 див .: https://getbootstrap.com/docs/3.3/css/#helper-classes > Класи помічників.

Про Bootstrap 4 див .: https://getbootstrap.com/docs/4.0/utilities/float/#responsive

pull-rightКоманда була видалена і замінена float-rightабо взагаліfloat-{sm,md,lg,xl}-{left,right,none}

У twitter bootstrap 3 спробуйте клас тягнути праворуч

class="btn pull-right"

Клас "pull-right" може бути не правильним шляхом, оскільки використовується "float: right" замість вирівнювання тексту.

Перевіряючи файл css bootstrap 3, я знайшов клас "текст-право" на рядку 457. Цей клас повинен бути правильним способом вирівнювання тексту праворуч.

Деякі коди:

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

Оновлення 2019 - Bootstrap 4.0.0

Зараз pull-rightклас float-rightу 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

Також краще не вирівняти список ul і використовувати елементи блоків для рядків.

Є float-rightще не працює?

Пам’ятайте, що Bootstrap 4 зараз є флексбоком , і багато елементів, display:flexякі можуть перешкоджати функціонуванню float-right. У деяких випадках класи util люблять align-self-endабо ml-autoпрацюють з метою правильного вирівнювання елементів, що знаходяться всередині контейнера flexbox, як Bootstrap 4 .row, Card або Nav.

Також пам’ятайте, що text-rightвсе ще працює над вбудованими елементами.

Завантажувальний інструмент 4 вирівняє правильні приклади

Завантаження 3

Використовуйте pull-rightклас.

Використовуйте buttonтег замість inputі використовуйте pull-rightклас.

pull-right клас повністю переплутав обидві ваші кнопки, але ви можете виправити це, визначивши власні поля з правого боку.

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

Потім використовуйте наступний CSS для класу

.RbtnMargin { margin-left: 5px; }

Додаючи до прийнятої відповіді, під час роботи в контейнерах і стовпцях, що вбудовуються в набивання з завантажувального інструменту, я іноді маю повну натягнуту колонку з дочірнім дівом, який робить потяг як шлях.

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

Крім того, усі стовпці додаватимуть до загальної кількості стовпців сітки (за замовчуванням 12), разом із тим, щоб перший стовпець зміщений.

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

Вибачте за відповідь на старе вже відповів на запитання, але я подумав, що я зазначу кілька причин того, що ваша jsfiddle не працює, якщо інші перевіряють її, і дивуються, чому правильний клас, як описано у прийнятій відповіді, не робить я там не працюю.

1. URL-адреса до файла bootstrap.css недійсна. (можливо, це спрацювало, коли ви задали питання).
2. ви повинні додати атрибут: type = "button" до вашого вхідного елемента, інакше він не відображатиметься як кнопка - він буде відображатися як поле введення. А ще краще використовувати <button>елемент замість цього.
3. Крім того, через те, що вліво-вправо використовується плаваючий, ви отримаєте деяке похитування компонування кнопок, оскільки кожен LI не має достатньої висоти для розміщення висоти кнопки. Додавання цього css до висоти рядка або мінімальної висоти до LI дозволило б вирішити це.

робоча скрипка: 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>

(Я також додав мінімальну ширину кнопок, оскільки я не витримав вигляду рваного виправданого вигляду кнопок через різну ширину :))

Використання pull-rightпомічника Bootstrap не працювало для нас, оскільки воно використовує float: right, що змушує inline-blockелементи статиblock . А коли вони .btnстають block, вони втрачають природний запас, який inline-blockнадав їм як квазітекстові елементи.

Тому замість цього ми використовували direction: rtl;батьківський елемент, який призводить до того, що текст всередині цього елемента розміщується справа наліво, і це також призводить inline-blockдо компонування елементів справа наліво. Ви можете використовувати менше, ніж наступне, щоб уникнути того, щоб дітей також не виклали rtl:

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

  * {
    direction: ltr;
  }
}

і використовувати його так:

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

У Bootstrap 4 : Спробуйте таким чином за допомогою Flexbox. Дивіться документацію в 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>

Праворуч витягніть амортизується станом на v3.1.0. Просто голови вгору.

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

Застосувати pull-rightклас для кнопки. http://getbootstrap.com/css/#helper-classes-floats -> Класи помічників

Це посилання допоможе

Тепер вам потрібно додати .dropdown-menu-right до існуючого елемента .dropdown-меню. правий правий більше не підтримується. Більше інформації тут http://getbootstrap.com/components/#btn-dropdowns

Чи можете ви спробувати користувацький CSS в сторону завантажувального CSS, щоб побачити, чи є якісь зміни. Спробуйте

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

Якщо це працює, то ви можете спробувати маніпулювати тим, що у вас є, або додати до цього інше форматування і досягти того, що ви хочете. Оскільки ви використовуєте bootstrap, це не означає, що він не пропонує вам те, що ви хочете, тоді ви просто керуєте ним. Ви працюєте зі своїми кодами, і тому ви наказуєте це робити так, як ви говорите. Ура!

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

Я просто використовував макет .. застосувати стилі для лі ..

або

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

в CSS

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

ви також можете використовувати порожні стовпці, щоб дати пробіли зліва

подібно до

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

Демо :: демонстрація Jsfiddle

З Bootstrap V3.3.1 наступний стиль CSS вирішить цю проблему

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

Примітка. Я спробував усі пропозиції в публікаціях вище та всіх адресах старих версій і не надаю виправлення новим версіям завантажувальної версії.

для завантажувальної документації 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>