Estoy usando Bootstrap 3, y tiene un problema el conseguir de un div, para que se sientan sobre un jumbotron de encabezado.
Estoy usando el jumbotron clase de darme un ancho total, sensible encabezado con una imagen de fondo como de abajo…

<div class="container-fluid">
<div class="jumbotron">
    <div class="container">
        <div class="row">
        <div class="col-md-8">text here</div>
        <div class="col-md-4">text here</div>
        </div>
    </div>
</div>

Aquí está el resto de la página…

 <div class="container">rest of site goes here
 </div>

Lo que quiero hacer es que toda mi sitio/contenedor DEBAJO de la jumbotron – deslice hacia arriba y cubrir la mitad de su altura. Obviamente como es, el contenedor para el contenido del sitio está desactivada por debajo de la jumbotron, pero necesito una solución para obtener acerca de 100px para cubrir la mitad inferior de jumbotron.

He intentado tanto z-index métodos y posicionamiento absoluto, pero no puede conseguir ya sea para trabajar. Alguna sugerencia?

UN EJEMPLO PARA TRABAJAR CON EL AQUÍ – http://jsfiddle.net/9b9Da/7/

  • No hay .container-fluid regla en Bootstrap 3, a menos que su propio estilo de clase.
  • así que me puede quitar que todo el div que envuelve mi jumbotron de arriba? ah, sí. parece que me puede. Cualquier idoeas sobre cómo puedo ahora ‘float; el contenido del sitio div sobre el jumbo?
  • Necesito que el contenido se mueva de arriba para cubrir el jumbotron. Por ejemplo, si el jumbo es de 500px de alto, necesito el contenido para que se inicie en 250px desde la parte superior de la página – NO completamente bajo el jumbo en 500px de arriba. que sentido?
  • aquí está una actualización – jsfiddle.net/9b9Da/7
  • Sí Bootstrap 3 ha .contenedor de fluido! getbootstrap.com/css/#grid-example-fluid
InformationsquelleAutor lowercase | 2013-11-15

2 Comentarios

  1. 2

    Como se indica en los comentarios, Bootstrap 3 no tiene un .container-fluid clase, que fue eliminado en Bootstrap 2.3.2 como .rows están llenos de ancho por defecto (Mobile primera aproximación). position: relative se utilizó para compensar su recubre el contenido <div> a aparecer a mitad de camino sobre el .jumbotron

    <div class="jumbotron">
         <div class="col-md-8 jumbotext">text here</div>
         <div class="col-md-4 jumbotext">text here</div>
    </div>
    <div class="container" id="content">
        <div class="row">
            This content needs to float over the Jumbotron above
        </div>
    </div>
    
    <style>
        #content {
           position: relative;
           bottom: 80px;
           z-index: 500;
           opacity: 0.6;
       }
    
       #content > .row {
           min-height: 400px;
           background: #cccccc;
       }
    
       .jumbotron > .jumbotext {
           z-index: 700;
       }
    </style>

    El violín: http://jsfiddle.net/9b9Da/9/

Dejar respuesta

Please enter your comment!
Please enter your name here