Как поставить вход и раскрывающийся список рядом в Bootstrap? - PullRequest
Новая
       4

Как поставить вход и раскрывающийся список рядом в Bootstrap?

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

Новый для bootstrap и боролся с этой реализацией. Я хочу, чтобы ввод текста и выпадающий переключатель происходили без полей, но я не могу понять это.

Вот как бы мне хотелось, чтобы это было: enter image description here

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="60" disabled>
  </div>
  <div class="col"><button class="btn btn-secondary dropdown-toggle btn-square-only" disabled>months</button>
  </div>
</div>

Вот что я получаю. Только btn-square-only - это особенность стиля. Любые идеи? enter image description here

Любое руководство приветствуется.

Ответы [ 2 ]

3 голосов
/ 08 февраля 2020

Вы можете следовать ниже Bootstrap структуре и определять ширину, как вы хотите, поэтому я должен определить width-150px класс с имеет 150px width из input-group div. 

.width-150px{
  width: 150px!important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container my-4">
  <div class="row">
    <div class="col">
      <div class="input-group width-150px">
        <input type="text" class="form-control text-center rounded-0" placeholder="60" disabled>
        <div class="input-group-append">
          <button class="btn btn-outline-secondary dropdown-toggle rounded-0" type="button" data-toggle="dropdown" disabled>Month</button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">January</a>
            <a class="dropdown-item" href="#">February</a>
            <a class="dropdown-item" href="#">March</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
1 голос
/ 08 февраля 2020

group`. Вы можете найти больше через bootstrap официальную документацию 

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  
 <div class="form-group row ">
        <div class="col-3 pr-0">
            <input type="text" class="form-control mx-0 " placeholder="60" disabled>
        </div>
        <div class="col-3 px-0"><button class="btn btn-secondary dropdown-toggle btn-square-only mx-0 "
                disabled>months</button>
        </div>
    </div>

Также, если вы проверяете элементы с помощью вычисляемой вкладки, вы видите, как поле и отступ влияют на <div>. Вот почему я поставил pr-0 и mx-0. Спасибо

...