Question

我有一个引导容器。由于这是常见的，它不会占据孔页宽度，但在左侧和右侧以很多边距为中心。

我想要实现的是左侧和右侧（除了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>

Answer 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 }

在这些父母中，有一个垂直和水平对齐箭头，其中包含一个特定的动作，可以根据需要更改页面内容。

应该够了！

请注意，此解决方案并不是最简单的，但它提供了一定的模块性（更改高度，父级，位置......）。

Answer 2

最简单的解决方案是使用网格系统。

<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>

除了引导容器

2 个答案: