ブートストラップコンテナ以外の矢印

私はブートストラップコンテナを持っています。これは一般的であるため、穴のページ幅は使用しませんが、左右のマージンを中心にしています。ブートストラップコンテナ以外の矢印

私は達成しようとしているのは、左側と右側（したがって、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>

出典

2016-04-08 nameless

いくつかのコード – Robert

を提供してください、あなたが現在持っているものの例を提供していただけますか？ –

要素の位置を考慮せずに最も簡単な方法は、負のマージンを使用することです。（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%; 
}

出典

2016-04-08 09:45:58

問題は、モバイルデバイスでも同様に動作させたいので、ピクセルが好きではありません。 – nameless

@nameless負のパーセンテージ – Almis

とブレークポイントを使用してパーセンテージを変更することができます –

ブートストラップがするようにあなたが世界的にそれを行うことができカルーセルの矢印：両親がいるページの各辺のネーチャーはトップに固定され、画面の高さは固定された高さで固定されています（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 }

そして、これらの両親で、あなたが望むようにページの内容を変更するにはリンクされ、特定のアクションと垂直方向と水平方向の整列矢を持ちます。

十分なはずです。

このソリューションは最も簡単ではありませんが、特定のモジュール性（高さ、親、位置の変更など）を提供します。

出典

2016-04-08 09:47:06

どうすればjqueryのことをやることができますか？今のところ、私が持っているdivコンテナは、あなたの解決策を使って、何とか変わっています。 – nameless

ページの読み込み中に一度だけ修正すると、変更されるべきではありません。。のようないろいろ書い： '$（ドキュメント）.ready（関数（）{ $（ 'yourcontainer '）の高さ（$（ウィンドウ）.height（））; または多分 $（と' yourcontainer'。）.css（ 'height'、value + 'px'）; }）; .height（true）、.outerHeight（）などを使用したい.heightのjqueryドキュメントを確認してください。 –

最も簡単な解決策は、グリッドシステムも使いすぎです。

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

出典

2016-04-08 09:52:29 Lee

ブートストラップコンテナ以外の矢印

答えて

関連する問題