引导容器之外的箭头答案

【问题标题】：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>

【问题讨论】：

请提供一些代码
您能否提供一个您目前拥有的示例？

标签： javascript jquery html css twitter-bootstrap

【解决方案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">&larr;</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>

【讨论】：