Question

我在页面上有两个旋转木马，宽度不同，一个在col-md-6中，另一个在col-md-12中。每个都有不同的id，一个是MyCarousel，另一个是NurseCarousel。

问题是两者都希望宽1040px，而col-md-6中的第二个溢出，因为样式放在1040px的容器上，并且不会尝试装入容器。

我已经尝试过溢出：隐藏哪些在响应时不能正常工作。我注意到，每次旋转木马滑动时，样式标签中的1040px都会被重新分配。

最令人困惑但如果我无法修复它，我将不得不下载owl carousel并在页面上使用第二个。

全宽：

        <div class="col-md-12">
          <div id="myCarousel" class="carousel slide" data-ride="carousel">

            <ol class="carousel-indicators" style="bottom: 5px;">
{% for banner in home_carousel %}
              <li data-target="#myCarousel" data-slide-to="{{forloop.counter0}}" class="{% if forloop.first %}active{% endif %}"></li>
{% endfor %}
            </ol>

            <div class="carousel-inner" role="listbox">
{% for banner in home_carousel %}

              <div class="item {% if forloop.first %}active{% endif %}">

                <img class="responsive" src="{% thumbnail banner.banner_image 1170x513 upscale crop %}" alt="{{banner.banner_alt}}" />
                <div class="overlay">
                  <h2 class="line1">{{banner.banner_line_1}}</h2>
                  <div class="line2">{{banner.banner_line_2}}</div>
                </div>
              </div>
{% endfor %}
            </div>

            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>

          </div>            
        </div>

半宽：

        <div class="col-md-6">
          <div class="bg-right equal-col">
            <h2 class="title">Nurse Of The Month</h2>
            <div class="margins">
              <div id="nurseCarousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" role="listbox">   

{% for banner in nurse_carousel %}
                  <div class="item {% if forloop.first %}active{% endif %}">
                   <img class="responsive" src="{% thumbnail banner.banner_image 531x166 upscale crop %}" alt="{{banner.banner_alt}}" />
                 </div>
{% endfor %}

               </div>
              </div>
            </div>

            <div class="text margins2">{{common.nurse_lead|safe}}</div>
            <div class="margins"><a class="read-more" href="todo">NOMINATE YOUR FAVOURITE NURSE</a></div>
            <div class="clearfix" style="padding-bottom: 27px;"></div>
          </div>
        </div>

会发生什么：

<div id="nurseCarousel" class="carousel slide" data-ride="carousel" style="width:1040px;">

进一步探索：

很抱歉你的错过了解我。是的，我的页面响应我因为这个原因使用bootstrap。我在页面上放置了两个转盘，一个在12列内，一个在6列内。两者都是响应式的，但看起来第6列中的第二个就像它从容器右侧推出一样在12列内。它通过添加宽度为1040px的内联样式来实现。我唯一的结论是，旋转木马的宽度并不是单个旋转木马一页的唯一，并且在引导程序javascript中应用的样式适用于一页上的所有。我决定选择猫头鹰旋转木马，但显然想知道将来这是否可以用bootstraps旋转木马。

两个Bootstrap轮播在同一页面上有不同的宽度

0 个答案: