как решить эту проблему с наложением div в css - PullRequest
Новая
       7

как решить эту проблему с наложением div в css

0 голосов
/ 15 февраля 2020

Как решить div проблему с оверлеем здесь у меня есть один div в этом div Я добавил два класса col-sm-6. Но когда я проверяю отзывчивость, она переходит div. Я не знаю, как решить. Может кто-нибудь, пожалуйста, помогите мне.

У меня есть изображение вывода, которое вы видите:) 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="block">
  <div class="row">
    <div class="col-sm-6">
      <p><strong>Showing 1 to 6 of 6 entries</strong></p>
    </div>

    <div class="col-sm-6" style="top: -8px;">
      <div class="pagination">
        <button class="btn btn-link previous">Previous</button>
        <button class="btn btn-info number">1</button>
        <button class="btn btn-link next">Next</button>
      </div>
    </div>
  </div>
</div>

enter image description here

Ответы [ 2 ]

1 голос
/ 15 февраля 2020

обнаружили, что класс мобильной сетки (col-xs-12) отсутствует. Пожалуйста, попробуйте ниже фрагмент. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="block">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <p><strong>Showing 1 to 6 of 6 entries</strong></p>
            </div>

            <div class="col-xs-12 col-sm-6">
                <div class="pagination">
                    <button class="btn btn-link previous">Previous</button>
                    <button class="btn btn-info number">1</button>
                    <button class="btn btn-link next">Next</button>
                </div>
            </div>
        </div>
    </div>
0 голосов
/ 16 февраля 2020

Вы должны установить div "col-12" для мобильного размера в bootstrap4. "Col-sm-6" не работает для размера меньше чем 557px.и сделайте ваш div "float" правильным. 

.float-right{
  float:rigth !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="block">
  <div class="row">
    <div class="col-sm-6 col-12 float-right">
      <p><strong>Showing 1 to 6 of 6 entries</strong></p>
    </div>

    <div class="col-sm-6 col-12 float-right" style="top: -8px;">
      <div class="pagination">
        <button class="btn btn-link previous">Previous</button>
        <button class="btn btn-info number">1</button>
        <button class="btn btn-link next">Next</button>
      </div>
    </div>
  </div>
</div>
...