如何使用容器元素中包含的静态英雄标题文本创建响应式Bootstrap轮播？

时间：2018-09-27 02:18:32

标签： javascript html css twitter-bootstrap bootstrap-4

我正在尝试创建一个带有静态英雄标题的响应式Bootstrap轮播，当轮播图像更改时，该标题保持不变。英雄标头必须与响应式引导容器元素左对齐，并且必须在引导旋转木马内部垂直居中。我曾尝试寻找解决方案，但空无一物。我还尝试过使用位置为“ overlay”的“ overlay”元素：绝对，但是，这不允许我将bootstrap容器元素内的hero标头左对齐，也不允许我将hero标头与bootstrap传送带垂直对齐。这就是我想要的样子。 This is what I want it to look like.

这是我到目前为止所拥有的。

.heroOverlay {
    
    z-index: 12;
    position: absolute;
    /* takes div out of document flow */
    top: auto;
    /* The distance between the div with the top of document */
    left: 0px;
    /* Make the div full width */
    right: 0px;
    /* Make the div full width */
    margin: auto auto 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<!-- Bootstrap 4 CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

</head>
<header>
            <div class="heroOverlay">
                <div class="container">
                    <div class="jumbotron text-right bg-transparent">
                        <h1 class="display-4">Chinese Take-In</h1>
                        <p class="lead">Take-in Ingredients, Take-out Memories</p>
                        <hr class="my-4">
                        <a class="btn btn-primary btn-lg" href="/booking.html" role="button">Book Now</a>
                    </div>
                </div>
            </div>
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Asian food on table">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Stirfry being cooked in a wok">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Ramen noodles in bowl">
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
            </div>

        </header>
        <!-- JQuery & JQuery UI -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

    <!-- Bootstrap 4 JavaScript -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

任何帮助将不胜感激。谢谢！

1 个答案:

答案 0 :(得分：0)

欢迎堆栈溢出...

签出sample code

对于较小的字体，您可能必须拼写出确切的字体大小...类似地，对于非常大的屏幕，最适合您拼写出确切的字体大小...因为单位为vw的字体是动态的大小。 Media queries将帮助您处理这些极端情况。

HTML ：

.heroOverlay {
  z-index: 12;
  position: absolute;
  top: 30%;
  left: 0px;
  right: 0px;
  margin: auto auto 0 10%;
  width: 80%;
  background: rgba(240, 255, 255, .5);
  padding: 30px 0;
}

.heroOverlay h1 {
  font-size: 5.5vw;
}

.heroOverlay p {
  font-size: 3vw;
}

.heroOverlay a {
  font-size: 2vw;
  padding: .5vw 1vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<header>

  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="heroOverlay">
        <div class="container">
          <div class=" text-left bg-transparent">
            <h1 class="display-4">Chinese Take-In</h1>
            <p class="lead">Take-in Ingredients, Take-out Memories</p>
            <a class="btn btn-primary btn-lg" href="/booking.html" role="button">Book Now</a>
          </div>
        </div>
      </div>
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Asian food on table">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Stirfry being cooked in a wok">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://images.pexels.com/photos/628776/pexels-photo-628776.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Ramen noodles in bowl">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

</header>
<!-- JQuery & JQuery UI -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<!-- Bootstrap 4 JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

相关问题
最新问题