Pfeile neben Bootstrap-Container

Ich habe einen Bootstrap-Container. Wie dies üblich ist, nimmt es nicht die Lochseitenbreite, sondern ist zentriert mit viel Rand auf der linken und rechten Seite.Pfeile neben Bootstrap-Container

Was ich versuche zu erreichen ist, dass auf der linken und der rechten Seite (so neben der div mit der container Klasse, gibt es 2 zentrierte Pfeile, linke Seite nach links und rechts nach rechts zeigend.

Sie fragen sich, warum ich das tun möchte? Ich versuche, etwas wie ein Karussell, aber mit Seiten, so wenn ich auf den rechten Pfeil klicken, kommt der Inhalt der nächsten Seite, klicken Sie auf den Pfeil nach links dann komme ich auf die andere Seite zurück .. ich hoffe, Sie wissen, was ich meine ...

Was ich habe, ist dies:

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

Quelle

2016-04-08 nameless

Bitte geben Sie einen Code ein – Robert

Können Sie bitte ein Beispiel dafür nennen, was Sie derzeit haben? –

Der einfachste Weg, ohne die Position Ihrer Elemente zu berücksichtigen, wäre die Verwendung negativer Ränder. (fiddle here)

html:

<div id="arrow">&larr;</div>

css:

#arrow { 
margin-left: -100px; 
}

Ein weiterer gangbarer Weg ist position: absolute wie folgt zu verwenden:

#container { 
    position: relative; 
} 

#left-arrow { 
position: absolute; 
top: 40%; 
bottom: 40%; 
height: 10%; 
line-height: 100%; 
left: -5%; 
}

Quelle

2016-04-08 09:45:58

Das Problem ist, dass ich es auch auf mobilen Geräten arbeiten will, also mag ich keine Pixel .. – nameless

@nameless können Sie negative Prozent – Almis

und Haltepunkte verwenden, um den Prozentsatz zu ändern –

Sie es global tun könnte, als Bootstrap tut mit dem Pfeil im Karussell: Eltern haben co auf jeder Seite der Seite, auf der oberen Seite UND mit der Höhe des Bildschirms als feste Höhe fixiert (einfach mit JQuery zu tun).

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

Sie könnten ein anderes Elternteil für alle von ihnen haben, um eine andere Struktur oder etwas zu haben. (In diesem Fall ändern feste Position absolute Positionierung)

Und in 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 }

Und in diesen Eltern, mit einer vertikalen und horizontalen align Pfeil mit einer bestimmten Aktion verknüpft Seiteninhalt ändern, wie Sie möchten .

Sollte genug sein!

Beachten Sie, dass diese Lösung nicht die einfachste ist, aber eine gewisse Modularität bietet (Höhe, Eltern, Position ändern ...).

Quelle

2016-04-08 09:47:06

Wie würde ich dann die Jquery-Sache machen? Weil jetzt der div Container, den ich habe, die volle Höhe des Bildschirms hat, mit Ihrer Lösung ändert er sich irgendwie .... – nameless

Wenn Sie es nur einmal während des Ladens der Seite fixieren, sollte es sich nicht ändern. some wie: 'yourcontainer ' '$ (document) .ready (function() { $() Höhe ($ (Fenster) .height()); oder mit vielleicht $ ('. Yourcontainer') .css ('height', value + 'px'); }); ' Überprüfen Sie das jquery doc für .height, etwas, das ich verwenden möchte .height (true), .outerHeight() oder andere. –

Die einfachste Lösung ist auch, das Grid-System zu verwenden.

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

Quelle

2016-04-08 09:52:29 Lee

Pfeile neben Bootstrap-Container

Antwort

Verwandte Themen