我有一个 Bootstrap 容器。由于这是常见的，它不占用空洞页面宽度，而是居中，左右两侧有很多边距。
我想要实现的是，在左侧和右侧(因此除了带有 container 类的 div 之外，还有 2 个居中箭头，左侧指向左侧和右侧边指向右边。
你想知道，我为什么要这样做？我试着做一些类似旋转木马的东西，但是有页面，所以当我点击右箭头时，会出现下一页的内容，然后点击左箭头，我回到另一页..我希望你明白我的意思...
我的是这样的:
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop Upload</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<link rel="stylesheet" href="css/dropzone.css" type="text/css"/>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/dropzone.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container fill">
<form action="upload.php" class="dropzone needsclick dz-clickable full-height">
<div class="dz-message"><b> </b></div>
</form>
</div>
</body>
</html>
最佳答案
您可以像 Bootstrap 对旋转木马中的箭头那样在全局范围内执行此操作: 在页面的每一侧都有父容器，固定在顶部并且屏幕高度为固定高度(使用 JQuery 很容易做到)。
<body>
<div class="parentofarrow left"><div class="parrentofarrow__arrow left"></div></div>
<div class="parentofarrow right"><div class="parrentofarrow__arrow right"></div></div>
<div class="container"></div>
</body>
你可以有另一个 parent 让他们拥有不同的结构或任何东西。 (在这种情况下，将固定位置更改为绝对位置)
在 CSS 中:
.parentofarrow {
position: fixed; // or absolute to a specific parent (relative)
top: 0px;
// height fixed with screensheight using Jquery
width: // as you wish;
text-align: center; // or margin auto on arrows
}
.parentofarrow.left { left: 0px; }
.parentofarrow.right { right: 0px; }
.parentofarrow__arrow { //customize and positionning as you wish }
在这些 parent 中，有一个垂直和水平对齐箭头，带有特定的操作链接，可以根据需要更改页面内容。
应该够了吧!
请注意，此解决方案不是最简单的，但它提供了一定的模块化(更改高度、父级、位置...)。
关于javascript - Bootstrap 容器之外的箭头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36496343/