Bootstrap 4 делает кнопки отзывчивыми

Question

Я пытаюсь сделать несколько центрированных кнопок в Bootstrap 4 для проекта. Я новичок в кодировании, и пока я достиг этого, и я хочу, чтобы они складывались при просмотре на планшетах и ​​мобильных устройствах. Прямо сейчас это превосходит друг друга в мобильных и планшетных устройствах.

Любая помощь, которую вы можете предоставить, будет принята с благодарностью. :)

Мой код:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container-fluid py-2">
		<div class="row text-center">
			<div class="col-10 offset-1">

				<button class="btn btn-primary mr-2 select-all">Select All Items</button>
				<button class="btn btn-primary mr-2 unselect-all">Unselect All Items</button>
				<button class="btn btn-primary mr-2" id="latencybutton">New Items</button>
				<button class="btn btn-primary mr-2 clear-all">Clear All</button>
				<button class="btn btn-primary mr-2 dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Remove Items</button>
				<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
					<button class="dropdown-item select-1" type="button">Items 1</button>
					<button class="dropdown-item select-2" type="button">Items 2</button>
					<button class="dropdown-item select-3" type="button">Items 3</button>
					<button class="dropdown-item select-4" type="button">Items 4</button>
				</div>
			</div>
		</div>
	</div>

Answer 1

Сетка Bootstrap 4 может помочь вам достичь этого. Ниже приведена обновленная версия фрагмента кода, которая создает адаптивные кнопки, которые отображаются горизонтально на больших экранах и вертикально на экранах малого и среднего размера.

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container-fluid py-2">
  <div class="row"> 
    <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 mb-1"><button class="btn btn-primary mr-2 select-all">Select All Items</button></div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 mb-1"><button class="btn btn-primary mr-2 unselect-all">Unselect All Items</button></div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 mb-1"><button class="btn btn-primary mr-2" id="latencybutton">New Items</button></div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 mb-1"><button class="btn btn-primary mr-2 clear-all">Clear All</button></div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 mb-1"><button class="btn btn-primary mr-2 dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Remove Items</button>
                      <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                              <button class="dropdown-item select-1" type="button">Items 1</button>
    	                        <button class="dropdown-item select-2" type="button">Items 2</button>
    	                        <button class="dropdown-item select-3" type="button">Items 3</button>
    	                         <button class="dropdown-item select-4" type="button">Items 4</button>
                      </div>
    </div>
  </div>
 </div>

Answer 2

Оберните все свои кнопки в <div> с уникальным id на ваш выбор. Затем используйте этот фрагмент:

$(window).on('load resize', function(){
  $('#myGroup').toggleClass('btn-group-vertical', $(window).width() < 720)
})

... заменив #myGroup вашим уникальным идентификатором и 720 желаемой шириной, в соответствии с сеточной системой Bootstrap контрольные точки реагирования .

Посмотрите, как это работает:

$(window).on('load resize', function(){
  $('#myGroup').toggleClass('btn-group-vertical', $(window).width() < 720)
})

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container-fluid py-2">
  <div class="row text-center">
    <div class="col-10 offset-1">
      <div id="myGroup" role="group">
        <button class="btn btn-primary mr-2 select-all">Select All Items</button>
        <button class="btn btn-primary mr-2 unselect-all">Unselect All Items</button>
        <button class="btn btn-primary mr-2" id="latencybutton">New Items</button>
        <button class="btn btn-primary mr-2 clear-all">Clear All</button>
        <button class="btn btn-primary mr-2 dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Remove Items</button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
          <button class="dropdown-item select-1" type="button">Items 1</button>
          <button class="dropdown-item select-2" type="button">Items 2</button>
          <button class="dropdown-item select-3" type="button">Items 3</button>
          <button class="dropdown-item select-4" type="button">Items 4</button>
        </div>
    </div>
  </div>
</div>

Фрагмент применяет вертикальное изменение Bootstrap's .btn-group (.btn-group-vertical) к оболочке в зависимости от того, является ли ширина окнаменьше указанной ширины.

---

Проверка выполняется по событиям load и resize окна. Если вы хотите использовать это во многих местах, вы можете ограничить его выполнение, так как событие resize может запускаться очень много раз в секунду.
Это не проблема, если вы используете его только один раз, хотя, в частности,потому что и проверенное условие, и манипуляция с DOM довольно легки.

Answer 3

Может быть, попробуйте что-то вроде мобильного меню ... Я имею в виду ... это будет какое-то дублирование html-элемента, но вы можете попробовать это. Создайте кнопку выпадающего меню и поместите в нее те кнопки, которые у вас уже есть, и установите разрешение экрана в качестве дисплея: нет;Кнопки, которые вы уже установили в запросе мобильного мультимедиа в качестве отображения: нет;

В результате должно получиться, что на ширине страницы рабочего стола у вас должны быть отдельные кнопки, расположенные отдельно, а на мобильном телефоне вы должны увидеть одну выпадающую кнопку сваши кнопки внутри.