загрузчик 3, выровняйте метку + ввод по левому краю в маленьком окне просмотра, не переходя на новую строку - PullRequest
Новая
       29

загрузчик 3, выровняйте метку + ввод по левому краю в маленьком окне просмотра, не переходя на новую строку

0 голосов
/ 23 июня 2019

Я работаю с начальной загрузкой 3.3.7, и у меня есть простой комбо с меткой, которую я хочу выровнять по левому краю и в той же строке.

Но когда область просмотра становится меньше 768, она переходит к следующему ряду, даже если на нем много места, например:

Вот в окне просмотра 770 (и я бы хотел сохранить его на маленьких экранах)

enter image description here

И здесь, в окне просмотра 764, выборочный ввод отключается, хотя он имеет много места

enter image description here

Вот живой пример: https://www.codeply.com/go/npDT2mmYEP

Я вижу в документации начальной загрузки следующее:

Добавьте .form-inline к вашей форме (которая не должна быть) для Выровненные по левому краю и встроенные блоки управления. Это относится только к формам в окнах просмотра шириной не менее 768 пикселей.

Так как я могу это исправить, я просто хочу сохранить <p> с текстом "Ver" рядом с комбо <select> даже на небольших устройствах ...

Ответы [ 2 ]

1 голос
/ 23 июня 2019

Вы можете использовать сетку Bootstrap 3 col-xs-**, и вы можете настроить их согласно вашему требованию 

    .fix-pagination .pagination {
      margin-top: -20px;
      margin-bottom: -20px;
    }
    .red {
      background-color: red;
    }
    .green {
      background-color: green;
    }
 <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
  <div class="row fix-pagination">
    <div class="pull-left">
      <p class="col-xs-3 form-control-static red">Ver:</p>
      <p class="col-xs-9" style="padding-left:0px">
        <select class=" form-control repsal-rows-per-page-select">
          <option>20 registros</option>
          <option>50 registros</option>
          <option>100 registros</option>
          <option>500 registros</option>
        </select>
      </p>
    </div>
    <div class="pull-right green">
      <nav class="pull-right" aria-label="Page navigation">
        <ul class="pagination">
          <li>
            <a href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </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="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>

</div>
<!-- /container -->
0 голосов
/ 23 июня 2019

Пока что я могу решить это так: 

.form-inline .form-control,
.form-inline .form-control-static {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

и это HTML 

<div class="pull-left">
  <div class="form-inline pull-left">
      <p class="form-control-static">Ver:</p>
      <select class="form-control">
        <option>20 filas</option>
        <option>50 filas</option>
        <option>100 filas</option>
        <option>500 filas</option>
      </select>
    </div>
</div>

Но я не уверен, что это лучшее решение

...