Question

我正在尝试使用bootstrap为网站制作旋转木马。我想设置bootstrap carusel的大小。我有3张图片，我想让滑块的大小为宽度：100％和高度：150px 。

以下是仅适用于滑块的html代码：

 <section id="slider">
      <div class="row">
        <div class="col-lg-12 col-md-12">
          <div class="slider_area">
            <!-- Start super slider -->
            <div id="slides">
              <ul class="slides-container">                          
                <li>
                  <img src="img/slider/2.jpg" alt="img" >
                   <div class="slider_caption">
                    <h2>Largest & Beautiful University</h2>
                    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                    <a class="slider_btn" href="#">Know More</a>
                  </div>
                  </li>
                   </ul>
              <nav class="slides-navigation">
                <a href="#" class="next"></a>
                <a href="#" class="prev"></a>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </section>

此HTML的CSS是

#slider{
  float: left;
  display: inline;
  width: 100%;
}
.slider_area {
  background-color: #ccc;
  display: inline;
  float: left;
  margin-top: 80px;
  width: 100%;
}
.slider_caption {
  left: 5%;
  position: absolute;
  top: 25%;
  width: 50%;
}
.slider_right_caption{
  left: 38%;
}
.slider_caption h2 {
  color: #fff;
  font-size: 33px;
  background-color: rgba(49, 59, 61, 0.6);
  padding: 8px;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.slider_caption p {
  background-color: rgba(49, 59, 61, 0.6);
  color: #fff;
  font-family: "Varela",sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 10px;
}
.slider_btn {  
  background: rgba(49, 59, 61, 0.6);
  border: 2px solid #fff;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  display: inline-block;
  font-family: "Varela",sans-serif;
  margin-top: 10px;
  padding: 9px 15px;
  text-decoration: none;
  -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;  
}
.slider_btn:hover,.slider_btn:focus{   
  text-decoration: none;
  outline: none;
}
.next,.prev{
  display: none !important;  
}
.slider_area:hover .next{
  display: block !important;
}
.slider_area:hover .prev{
  display: block !important;
}

我尝试对CSS进行以下更改，但没有效果。

.slider_area > slides-container > img, .slider_area > slides-container > a > img {
    height: 100px;
    width: 100%;
}

滑块区域缩小到给定高度，内容位于滑块后面。但滑块大小根本不会改变。请指南。

Answer 1

如果我理解正确，您希望滑块占据全宽并将其他内容推到下方或顶部但不在侧面。我要尝试的第一件事是将滑块显示为块元素。

目前，您没有Slider作为块元素，而是作为内联元素。更多相关信息：https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements 你应该给它一个阅读，当你理解块和非块显示做什么以及它的行为时，它会非常有用。

在你的css中你有以下代码，我建议你把它改成块，如果可能的话也删除浮点数，即没有浮点规则或浮点数：如果某些其他样式元素需要，则为无。

    #slider{
  float: left;
  display: inline;
  width: 100%;
}

变为

  #slider{
  float: none;
  display: block;
  width: 100%;
}

如何设置bootstrap carusel的大小？

1 个答案: