Некоторые элементы переходят на следующую строку в Bootstrap SM Size - PullRequest
Новая
       18

Некоторые элементы переходят на следующую строку в Bootstrap SM Size

0 голосов
/ 14 мая 2018

Я хочу, чтобы все мои элементы оставались в одном ряду.это мой код и кнопки переходят на следующую строку по размеру SM (менее 576 пикселей).как я могу это исправить?пожалуйста, посмотрите на снимок экрана. 3 кнопки переходят на следующую строку 

      <div class="row">
            <div class="col-xs-2 col-sm-3 col-md-2">
                <img src="img/1.png" alt="site-logo" class="site-logo">
            </div>
            <div class="col-xs-0 col-sm-0 col-md-7 d-none d-md-block">
                <label class="sr-only"></label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <div class="input-group-text">
                            <i class="fas fa-search"></i>
                        </div>
                    </div>
                    <input type="text" class="form-control" placeholder="جستجو">
                </div>
            </div>
            <div class="col-xs-7 col-sm-5 col-md-3 header-btn ml-auto">
                <button class="btn btn-header d-md-none">
                    <i class="fas fa-search"></i>
                </button>
                <button class="btn">ورود</button>
                <button class="btn">ثبت نام</button>
            </div>
        </div>

1 Ответ

0 голосов
/ 14 мая 2018

Есть несколько проблем с вашим кодом, большинство из которых связано с использованием col-xs.Первая проблема заключается в том, что на основе остальной части вашего кода вы используете Bootstrap 4, который удалил суффикс -xs.

Даже если вы были на Bootstrap 3, размер сетки -0 отсутствует.Наименьшее допустимое число будет 1, поэтому, используя 0, вы фактически заставляете Bootstrap игнорировать эти недопустимые объявления столбцов, пока он не достигнет действительного, что в случае вашего 2-го столбца будет col-md-7.

Итак, сначала нам нужно исправить объявления столбцов.Другая проблема, с которой вы можете столкнуться - ваши d-*-* объявления.В Bootstrap 3 с помощью d-block был правильный способ сделать столбец снова видимым ... но в Bootstrap 4 вам нужно использовать d-*-flex, так как Columns теперь являются частью модели Flexbox.Если вы используете -block, вы изменяете поведение столбца (с Flex на элемент уровня Block). 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="row">
  <div class="col-2 col-sm-4 col-md-2">
    <img src="img/1.png" alt="site-logo" class="site-logo">
  </div>

  <div class="col-md-7 d-none d-md-flex">
    <label class="sr-only"></label>
    <div class="input-group">
      <div class="input-group-prepend">
        <div class="input-group-text">
          <i class="fas fa-search"></i>
        </div>
      </div>
      
      <input type="text" class="form-control" placeholder="جستجو">
    </div>
  </div>

  <div class="col-10 col-sm-8 col-md-3 header-btn ml-auto">
    <button class="btn btn-header d-md-none"><i class="fas fa-search"></i></button>
    <button class="btn">ورود</button>
    <button class="btn">ثبت نام</button>
  </div>
</div>

Единственными другими изменениями здесь являются некоторые изменения размера столбца;вы действительно должны стараться, чтобы ваши столбцы всегда добавляли до 12, если вы хотите, чтобы содержимое охватывало всю ширину вашего container.

...