Question

我正在使用Bootstrap版本4.0.0-beta，我正在使用轮播功能。当我在显示器上查看时，我已经完美地配置了它的需要。（1920 x 1200）但是想根据用户显示器改变它的高度，例如1920 x 1080.我给了我的旋转木马高度为32rem但是如果用户在像我这样的小屏幕上则希望减小该尺寸说过。我相信媒体查询是我需要的，但我已经尝试过，无法弄明白。有人可以对此有所启发吗？

感谢。

Answer 1

管理自己解决它。刚用过这个。

SELECT @SQL = N'SELECT ' + @FieldName + ', COUNT(*) AS [Frequency] FROM ' + @TableName + ' GROUP BY ' + @FieldName + ' ORDER BY [Frequency] DESC';

Answer 2

请尝试下面的示例，让我知道它是否有效。

.img-responsive,
.thumbnail>img,
.thumbnail a>img,
.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
  display: block;
  width: 100%;
  height: auto;
}

.carousel-inner {
  border-radius: 15px;
}

.carousel-caption {
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 0 0 10px 25px;
  color: #fff;
  text-align: left;
}

.carousel-indicators {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  z-index: 15;
  margin: 0;
  padding: 0 25px 25px 0;
  text-align: right;
}

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

.carousel-containers {
  padding: 10px 0;
}

.carousel-containers {
  background-color: #fff;
  color: #555;
}

@media screen and (min-width: 768px) {
  .carousel-containers {
    padding: 1.5em 0;
  }
}

@media screen and (min-width: 992px) {
  .container {
    max-width: 930px;
  }
}

<div class="carousel-containers">
  <div class="container">

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>


      <div class="carousel-inner">
        <div class="item active">
          <img src="http://placehold.it/800x400" alt="...">
          <div class="carousel-caption">
            <h2>Heading</h2>
          </div>
        </div>
        <div class="item">
          <img src="http://placehold.it/800x400" alt="...">
          <div class="carousel-caption">
            <h2>Heading</h2>
          </div>
        </div>
        <div class="item">
          <img src="http://placehold.it/800x400" alt="...">
          <div class="carousel-caption">
            <h2>Heading</h2>
          </div>
        </div>
      </div>


      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>

  </div>
</div>

媒体查询缩小Bootstrap轮播

2 个答案: