引导容器之外的箭头
Posted
技术标签:
【中文标题】引导容器之外的箭头【英文标题】：Arrows besides bootstrap container 【发布时间】：2016-07-29 12:35:57 【问题描述】：我有一个引导容器。由于这很常见，它不占用孔页宽度，而是居中，左右两侧留有大量边距。
我想要实现的是，在左侧和右侧（所以除了带有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>
【问题讨论】：
请提供一些代码 您能否提供一个您目前拥有的示例？ 【参考方案1】：您可以像 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>
您可以有另一个父级，以使它们所有人具有不同的结构或任何东西。 （在这种情况下，将位置固定为绝对位置）
在 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
在这些父母中，有一个垂直和水平对齐箭头，其中包含一个特定的操作，可以根据需要更改页面内容。
应该够了！
请注意，此解决方案不是最简单的，但它提供了一定的模块化（更改高度、父级、位置...）。
【讨论】：
那我该怎么做 jquery 的事情呢？因为现在，我拥有的 div 容器具有屏幕的完整高度，使用您的解决方案它正在以某种方式发生变化...... 如果您在页面加载过程中只修复一次，它不应该改变。类似于：$( document ).ready(function() $('.yourcontainer').height($(window).height()); or with maybe $('.yourcontainer').css('height', value + 'px'); ); 检查 jquery 文档的 .height，我想使用 .height(true)、.outerHeight() 或其他。【参考方案2】：
不考虑元素位置的最简单方法是使用负边距。 (fiddle here)
html:
<div id="arrow">←</div>
css：
#arrow
margin-left: -100px;
另一种可行的方法是像这样使用position: absolute：
#container
position: relative;
#left-arrow
position: absolute;
top: 40%;
bottom: 40%;
height: 10%;
line-height: 100%;
left: -5%;
【讨论】：
问题是我想让它也能在移动设备上工作，所以我不喜欢像素.. @nameless 你可以使用负百分比 @Jonathan Argentiero 这适用于左右两边，但不知何故它在另一个 div 之上，我可以让这个居中吗？【参考方案3】：最简单的解决方案也是使用网格系统。
<div class="container fill">
<div class="row">
<div class="col-xs-1">Left</div>
<div class="col-xs-10 main-stage">
<form action="upload.php" class="dropzone needsclick dz-clickable full-height">
<div class="dz-message"><b> </b></div>
</form>
</div>
<div class="col-xs-1">Right</div>
</div>
</div>
</body>
【讨论】：
以上是关于引导容器之外的箭头的主要内容，如果未能解决你的问题，请参考以下文章