it-swarm.com.ru

Bootstrap выравнивание кнопки и нумерации страниц

Я использую 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

Пагинация имеет небольшое смещение.

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

13
Marcello90

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

.pagination {
margin: 0px !important;
}
9
Sujata Chanda

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

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

http://bootply.com/91736

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

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

Я бы пошел на:

<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

8
HenryW

Поместите приведенный ниже стиль в элемент ul:

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

Вы можете установить ширину и использовать поля для центрирования на странице. Также обратите внимание, чтобы это решение работало, вы должны удалить .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;
}
0
user2578173

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

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

или это на вашу кнопку и CSS:

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

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

0
Samih