Блог

Главная - Вопросы по программированию - Начальная группа ввода в одной строке

Начальная группа ввода в одной строке

#bootstrap-5

Вопрос:

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

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="container-fluid bg-dark">
    <div class="row">
      <div class="col">
        <a class="navbar-brand" href="#">Brand</a>
      </div>
      <div class="col">
        <div class="input-group flex-nowrap">
          <button class="btn btn-primary btn-lg" id="previous"> - </button>
          <input type="text" class="form-control text-center" id="pageNumber" value="1">
          <button class="btn btn-primary btn-lg" id="next">   </button>
        </div>
        <button class="btn btn-primary btn-lg" id="zoomIn">x</button>
      </div>
    </div>
  </div>

Ответ №1:

Просто примените .d-flex amp; .flex-nowrap к родителю .col . Это приведет к тому, что ширина .input-group будет скорректирована для размещения кнопки на той же строке.

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid bg-dark">
  <div class="row">
    <div class="col">
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="col d-flex flex-nowrap">
      <div class="input-group">
        <button class="btn btn-primary btn-lg" id="previous"> - </button>
        <input type="text" class="form-control text-center" id="pageNumber" value="1">
        <button class="btn btn-primary btn-lg" id="next">   </button>
      </div>
      <button class="btn btn-primary btn-lg" id="zoomIn">x</button>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
Метки: