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

使用您选择的独特id将所有按钮包装在<div>中。然后使用此代码段：

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

。根据 Bootstrap 的网格系统响应性断点，将#myGroup替换为您的唯一 ID，并将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.btn-group(.btn-group-vertical( 的垂直变体应用于包装器。

---

检查是在窗口的load和resize事件上完成的。如果你想在很多地方使用它，你可能想要限制它的执行，因为resize事件每秒可以触发很多次。
但是，如果您只使用它一次，这不是问题，特别是因为检查的条件和 DOM 操作都非常轻。

Answer 2

也许尝试一下像手机菜单盒这样的东西...... 我的意思是。。。这将是某种HTML元素重复，但你可以尝试这个。 创建下拉按钮并放入您已有并以桌面分辨率设置为显示的按钮：无; 您刚刚在移动媒体中设置的按钮查询显示为：无;

结果应该是，在页面的桌面宽度上，您应该单独放置普通按钮，而在移动设备上，您应该看到一个带有按钮的下拉按钮。

Answer 3

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>