Tengo un Bootstrap carrusel implementado en mi página y por alguna razón no puedo conseguir el texto de los subtítulos para volver a la posición en función del tamaño del navegador de la web.

Aquí está mi código HTML:

<!-- =======================CAROUSEL=========================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="first-slide" src="img/main-banner.png" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Democratizing the Internet of Things!</h1>
          <p><a class="btn btn-lg btn-primary" href="./index.php?d=splash" role="button">Try Splash</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img class="second-slide" src="img/banner-2.png" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Another Heading!</h1>
        </div>
      </div>
    </div>
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Estoy usando Bootstrap CDN:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

Todos estos son mis CSS cambios que he hecho para el carrusel:

.carousel-caption {
position: relative !important;
width: 550px;
top: 210px;
left: 380px !important;
z-index: 600;
max-height:177px;

}
.carousel-caption h1 {
    font-family: sans-serif !important;
    font-size: 44px !important;
    font-weight: 700 !important;
    line-height:36px !important;    
    color: #444 !important;
    margin: 0px !important;
    padding: 0px !important;
    text-shadow: 0px 0px 4px #fff !important;
    text-align: left !important;
}

.carousel-caption p {
    margin-top: 11px !important;
    font-size:18px !important;
    line-height:21px !important;
    color:#333 !important;
    padding-bottom: 11px !important;
    margin-bottom: 11px !important;
    text-shadow: 0px 0px 4px #fff !important;
    text-align: left !important;
}

.carousel-control.left, .carousel-control.right {
    background-image: none !important;
}

.carousel-indicators {
    left: 405px !important;
}

Esto es lo que el carrusel se ve en pantalla completa:
Bootstrap Carrusel - Hacer caption sensible a la altura de la ventana

Y esto es lo que sucede cuando empece a cambiar el tamaño del navegador de la web:
Bootstrap Carrusel - Hacer caption sensible a la altura de la ventana

He intentado todos los diferentes tipos de posiciones, pero para la vida de mí, no puede averiguar lo que estoy haciendo mal. Cualquier ayuda es muy apreciada.

InformationsquelleAutor user2100620 | 2015-04-17

2 Comentarios

  1. 7

    Para alinear verticalmente el título en el centro he utilizado el CSS función translateY o propiedad transform.

    Yo también quería que el título que se coloca directamente al lado de la izquierda carrusel de control.

    También quité extra espacio inferior que fue añadida por el defecto de bootstrap CSS.

    .carousel-caption {
    width: 550px;
    left: 15%;
    top: 50% !important;
    transform: translateY(-50%);
    text-align: left;
    bottom: initial;
    }

    El título aparece ahora correctamente sin importar el tamaño de la pantalla:
    Bootstrap Carrusel - Hacer caption sensible a la altura de la ventana

  2. 2

    Hago el carrusel sensible mediante

    @media (max-width: 767px) {
    tamaño específico estilo
    }

    Y añadir mi estilo de ese tamaño, yo uso de árboles de diferentes tamaños para obtener todos los alinear para cualquier tamaño de pantalla.

    • Gracias por la sugerencia. Que técnicamente funciona, pero tengo una de 30″ el monitor y me encuentro con que tengo que hacer muchos tamaños diferentes. Me preguntaba si hay una manera de simplemente centro es de 25% de la parte superior y el 25% de la izquierda de la div padre? He intentado utilizar a la izquierda,arriba: el 25% y el resultado fue el mismo que el anterior
    • puedes probar con text-align:center; a veces funciona

Dejar respuesta

Please enter your comment!
Please enter your name here