Question

我想使用轮播在“我的工作”部分中滚动浏览不同的图片作为投资组合网站的一部分。我使用Bootstrap网格系统将工作分为两列：一列用于图像，一列用于工作描述。 HTML的内容如下所示：

`

<div class="container" id="work-container">
        <div class="row">
            <div class="col image-container" id="qc-image">

            <img style="width: 30rem;" src="./assets/img/image.png">

            </div>
            <div class="col">

                <h2 style="color: #000000; text-align: center;">Name Of Project</h2>

            </div>

        </div>


    </div>

第一列中的图片是截图。我想要做的是做一个旋转木马类型的效果，让用户点击图像底部的圆圈，并滚动浏览屏幕截图的不同图像作为一种预览，但调整引导旋转木马证明是困难的这样做。

我为旋转木马幻灯片强加了以下代码，认为它可以工作，但图像的大小是您希望全尺寸旋转木马图像的大小。我把它设置为100％，认为它会匹配col的宽度但是没有用。

<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">
      <img src="la.jpg" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

是否有人能够阐明如何有效地做到这一点？我很开心这样一个想法，即引导旋转木马不是我想要做的最好的方法，但我不完全确定从哪里开始，也许是Node.js？

Answer 1

用它来分配图像和内容，并根据您的要求调整col-md- *值，然后为图像指定宽度100％

<div class="item">
  <div class="row">
    <div class="col-md-*">
      <img src="chicago.jpg" alt="Chicago">
    </div>
    <div class="col-md-*">
      <h2> content </h2>
    </div>
  </div>
</div>

Answer 2

您需要让column <div>s正确classes告诉bootstrap如何调整大小。在bootstrap <div>中12 imaginary columns分为<div>，无论<div class="col-xs-6"> // width of 6 columns when window resolution is extra small的宽度如何。

通过这样做：

bootstrap

我们告诉<div>为50%提供parent宽度<div class="col-xs-6 col-md-3"> // when at extra small width is 6 columns, when at medium switch to 3 columns的宽度。

您也可以这样做：

<div>s

正确调整jQuery的大小，包括bootstrap和bootstrap CSS脚本（以及images）之后，事情就应该有效。

此外，无需提供height width和automatically，他们应maximum width获取container的{{1}}并使用auto height。

以下是代码（运行底部的代码段）：

＆＃13;

<!-- jQuery, Bootstrap scripts and bootstrap CSS -->
<!-- put CSS in the head of the HTML doc, put scripts in head or bottom of the body -->

<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>


<div id="work-container">
  <div class="row">

      <!-- Carousel -->
      <div class="col-xs-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>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item active">
               <img src="http://www.quotemaster.org/images/b0/b0de398d580fe0cfc6431ec118c16cee.jpg" alt="Flower" />
              </div>
              <div class="item">
               <img src="http://ibmathsworld.com/wp-content/uploads/2016/01/IB-Examples.jpg" alt="Example" />
              </div>
            </div>

        </div>
        <!-- End of id myCarousel -->
      </div>
      <!-- End of col-xs-6 -->
    
      <!-- Content -->
      <div class="col-xs-6">
          <h2> content </h2>
          <div>
              <p>yeah, this is some content</p>
          </div>
      </div>
      <!-- End of col-xs-6 -->

  </div>
  <!-- End of row -->
</div>
<!-- End of work-container -->

＆＃13;

注意：我添加了一些示例内容和一些不同高度和宽度的示例图片来演示调整大小

图像大小不在bootstrap轮播中调整

2 个答案: