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

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

结果应该是，在页面的桌面宽度上，应该分别放置普通按钮，在移动设备上，应该看到一个下拉按钮，其中的按钮位于其中。

Answer 2

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 3

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

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

...根据Bootstrap的网格系统responsiveness breakpoints，将#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）的vertical variation应用于包装器。

对窗口的load和resize事件进行检查。如果您想在很多地方使用它，您可能想限制它的执行，因为resize事件每秒可能触发很多次。
不过，只使用一次就不会有问题，特别是因为检查条件和DOM操作都很轻巧。

Bootstrap 4使按钮响应式

3 个答案: