Question

我的布局中有三个元素top bar，content和bottom bar。

我正在使用Twitter Bootstrap 4

在移动设备上，我希望它们像这样堆叠：

top bar
content
bottom bar

在桌面上，我想要这个：

content    top bar
           bottom bar

视觉指南：

我什至如何？我似乎无法让它们正确排成一行，而我在这里掉进兔子洞的底部，所以我要问堆栈。

代码：

<html>
<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		

		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>
<body>
	<div class=container>
		<div class=row>
			<div class="col-12 col-md-5 order-md-2">
				<h3>Top Bar</h3>
			</div>
		
			<div class="col-12 col-md-7 order-md-1">
				<h3>Content</h3>
				<p>A bit of Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac turpis ac massa mollis posuere.</p>
				<p>Duis urna purus, sagittis eget fermentum in, aliquam sed est.</p> 
				<p>Praesent imperdiet a nisi at aliquet. Curabitur velit mi, vestibulum sed molestie non, egestas sit amet elit.</p>
				<p>Donec commodo tincidunt ligula sed pharetra. Etiam efficitur blandit laoreet. Aliquam eu pellentesque dui, eu accumsan dolor. Vestibulum congue facilisis porta. Praesent venenatis, risus eu mollis varius, erat est ornare felis, in rhoncus arcu metus eget ante.</p>
			</div>
		
			<div class="col-12 col-md-5 order-md-2 offset-md-7">
				<h3>Bottom Bar</h3>
			</div>
		</div>
	</div>
</body>

Answer 1

更改视口时，可以使用order类对元素进行重新排序。

在这里检查：https://getbootstrap.com/docs/4.0/layout/grid/#reordering

Answer 2

在Bootstrap上禁用flex或在行上添加修饰符并设置 #app { display: flex; justify-content: center; flex-direction: column; align-items: center; } .button_container { margin: 20px; } .slider_dots_container { width: 5%; display: flex; justify-content: space-around; } .slider_dots_dot { border: solid 2px lightgray; border-radius: 50%; height: 1px; } .dotActive { border-color: black; }

将中间的子项向左浮动，然后将顶部和底部的条向右浮动。另外，请删除偏移量，以使其优雅地填充间隙。

这应该可以为您提供桌面所需的功能；当然，您需要删除那些用于移动断点的功能。

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <div class="button_container">
    <button @click="slide(-1)">Prev</button>
    <button @click="slide(1)">Next</button>
    {{activeSlider}}
  </div>
  <div class="slider_dots_container">
    <span v-for="slider in sliderCount"
          :key="slider"
          class="slider_dots_dot"
          :class="{ dotActive: slider === activeSlider }">
    </span>
  </div>
</div>

Bootstrap堆栈元素在移动设备的顶部和底部，在桌面的侧边栏

2 个答案: