Question

我试图找到这个没有运气的解决方案。我无法相信没有人没有创造这样的东西（我可能没有找到它，因为我使用了错误的关键词）。无论如何，我需要创建一个内部有两列的容器。左列只是带有描述的静态文本。正确的一个应该包含3个Youtube视频，能够使用子弹逐个滑动它们（也许是箭头 - 但它们应该在我猜的视频之外）。这是概念：bootstrap cols。我该怎么做？

Answer 1

这是一个例子，试一试。我刚从w3schools bootstrap教程中复制了一个轮播示例，并添加了一些css属性。

.flex-box {
  display: flex;
  flex-flow: row wrap;
}

.flex-box #myCarousel{
  flex: 1 1 50%
}

.flex-box #desc {
  flex: 1 1 50%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid"> 
  <div class="row">
    <div class="flex-box">
        <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>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <iframe width="100%" height="345" src="https://www.youtube.com/embed/XGSy3_Czz8k">
    </iframe>
          </div>

          <div class="item">
           <iframe width="100%" height="345" src="https://www.youtube.com/embed/XGSy3_Czz8k">
    </iframe>
          </div>

          <div class="item">
            <iframe width="100%" height="345" src="https://www.youtube.com/embed/XGSy3_Czz8k">
    </iframe>
          </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
     
      <div id="desc" style="background-color: orangered; color: white;">
        <h3>Description</h3>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Answer 2

好的，所以我稍微调整了你的答案，这太棒了！非常感谢Thakur！不幸的是我还不能投票，但我希望你知道你救了我！

myCSS（无flexbox）和HTML：

.yell {
  background-color: yellow;
}

.padding {
  padding: 60px;
}


/*====Bullets position and color change====*/

ol.carousel-indicators {
  bottom: -50px;
}

ol.carousel-indicators li {
  background: transparent;
  border: 1px solid black;
}

ol.carousel-indicators li.active {
  background: black;
}

<div class="container yell">
  <div class="row padding">
    <div class="col-sm-6">
      <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>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/pmIxqkbzwm8"></iframe>
            </div>
          </div>
          <div class="item">
            <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/9rkInmyo_z8"></iframe>
            </div>
          </div>
          <div class="item">
            <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Ld8c_sgpbUU"></iframe>
            </div>
          </div>
        </div>
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
    <!-- Description column -->
    <div class="col-sm-6">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Mauris metus. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Morbi imperdiet, mauris ac auctor dictum, nisl ligula
        egestas nulla, et sollicitudin sem purus in lacus. Proin in tellus sit amet nibh dignissim sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas
      </p>
    </div>
  </div>
</div>

它响应迅速，堆叠完美！谢谢Thakur！

带有Youtube视频的Bootstrap中的滑块/旋转木马和另一侧的描述

2 个答案: