滑块内的框 div 在响应页面中未对齐

Question

我正在为我的页面使用 bootstrap3 design.Here 我正在添加一个横幅（滑块），在其中我正在添加一个包含一些内容的框。代码如下

<div class="row">
  <section id="slider">

    <ul class="rslides" id="modest-slider">

      <li class="slider-wrapper">

        <div class="slider-img-container">
          <img src="http://placehold.it/350x150&text=slider1" alt="slider1" />
        </div>

        <div class="slider-caption container">
          <div class="col-md-7" style="border-left-width: 4px; top: auto; bottom:100%; max-bottom: 126px; width:100%; max-width: 600px; background: rgba(255, 255, 255, 0.6);height:100%; max-height:130px;">
            <h1>Exclusively  New Concept!</h1>
            <p class="slider-description2">
              Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample...
            </p>
          </div>
        </div>
        <!-- /.slider-caption -->

      </li>
      <!-- /.slider-wrapper -->
      </ui>
  </section>

在浏览器全屏模式下运行完美。当我调整浏览器大小时，它在我的 header 中合并了。我怎样才能避免这种情况？如何使盒子内容在所有尺寸下都可见？

请参考图片

不胜感激！！

Answer 1

我不确定 header 栏，因为您必须为此使用自己的自定义 CSS。根据您提供的HTML，应该会像下面这样修复。

<div class="row">
    <div class="col-md-12">
        <section id="slider">
            <ul class="rslides" id="modest-slider">
                <li class="slider-wrapper">
                    <div class="slider-img-container">
                        <img src="http://placehold.it/350x150&text=slider1" alt="slider1" class="img-responsive" />
                    </div>
                    <div class="slider-caption container">
                        <div class="col-md-7" style="border-left-width: 4px; top: auto; bottom:100%; max-bottom: 126px; width:100%; max-width: 600px; background: rgba(255, 255, 255, 0.6);height:100%; max-height:130px;">
                            <h1>Exclusively  New Concept!</h1>
                            <p class="slider-description2">Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample...</p>
                        </div>
                    </div>
                    <!-- /.slider-caption -->
                </li>
                <!-- /.slider-wrapper -->
            </ul>
        </section>
    </div>      
</div>

滑块内的框 div 在响应页面中未对齐

Box div inside slider not aligning in responsive page

html

css

twitter-bootstrap-3