引导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

用您选择的唯一<div>将所有按钮包装在一个id中。然后使用以下代码片段：

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

..。根据Bootstrap的GridSystem响应断点，用唯一的id替换#myGroup，用所需的宽度替换720。

看到它起作用：

​

$(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 2

也许可以试试移动菜单..。我是说..。这将是某种类型的html元素复制，但您可以尝试这一点。创建下拉按钮并将您已经拥有的按钮放入其中，并在桌面分辨率上设置为display: none；您刚刚在移动媒体查询中设置的按钮为display: none；

结果应该是，在页面的桌面宽度，你应该有正常的按钮分开放置，在移动上，你应该看到一个下拉按钮与您的按钮在里面。

Answer 3

引导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>

​