Бутстреп-выравнивание кнопки и разбивки на страницы

Я использую Twitter Bootstrap 3 для создания моего нового сайта. Я хочу поместить кнопку с левой стороны и разбиение на страницы с правой стороны.

<button type="button" class="btn btn-default pull-left">Default</button>

<ul class="pagination pull-right">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
 </ul>

Моя проблема в том, что я не могу правильно выровнять оба элемента:

http://bootply.com/91723

Сетка имеет небольшое смещение.

Что я могу сделать, чтобы удалить это смещение?

ОТВЕТЫ

Ответ 1

Попробуйте добавить ths: -

.pagination {
margin: 0px !important;
}

Ответ 2

Оберните семантический описательный класс вокруг вашей кнопки и разбивки на страницы, например .navigation-bar, и используйте это для таргетинга поля на .pagination:

.navigation-bar .pagination {
      margin-top: 0;
    }

http://bootply.com/91736

Вы никогда не должны переопределять класс framework напрямую, так как это применимо ко всей базе кода. Альтернативой является просто расширение класса .pagination:

<ul class="pagination no-margin pull-right">

Ответ 3

Я бы пошел за:

<div class="btn-toolbar" role="toolbar" style="margin: 0;">
      <div class="btn-group">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>
      </div>

      <div class="btn-group pull-right">
                <ul class="pagination" style="margin: 0;">
                <li><a href="#">«</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">»</a></li>
            </ul>
      </div>
    </div>

http://www.bootply.com/116457

если вы замените кнопки <ul><li.... на кнопки, вам не нужно использовать style="margin: 0;

Пример здесь: http://getbootstrap.com/components/#btn-groups-toolbar

Ответ 4

Поместите стиль ниже в элемент ul:

<ul style="margin-top:0;" class="pagination pull-right">

Ответ 5

добавьте этот класс в свою ul и в ваш css:

.no-top-margin {
  margin-top: 0;
 }

или это к вашей кнопке и css:

.add-top-margin {
    margin-top: 20px;
}

Также я бы порекомендовал Googling и прочитал некоторые учебные пособия для начинающих по использованию либо Chrome Developer Tools, либо Firebug для firefox, особенно если вы собираетесь делать больше html/web-разработок в будущем: -).

Ответ 6

Вы можете установить ширину и использовать поля, чтобы центрировать ее на странице. Также обратите внимание, что для этого решения вам нужно удалить .pull-right из ul

Вот HTML:

<button type="button" class="btn btn-default pull-left">Default</button>

            <ul class="pagination pull-right">
                <li><a href="#">«</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">»</a></li>
            </ul>

Вот CSS:

.pagination {
  display: block;
  width: 232px;
  margin: 0 auto;
  background: #ccc;
}

Ответ 8

Вы можете поместить его в таблицу, а затем применить край поля.

<table>
<tr>
    <td>
        <button type="button" class="btn btn-default pull-left">
            Default</button>
    </td>
    <td>
        <ul class="pagination pull-right">
            <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </td>
</tr>

Ответ 9

`<div class="pagination justify-content-center pagination-large" id="pagination-demo">

`

justify-content-center будет сгибать страницу в центре