调整浏览器大小时对齐不正确 - 响应页面

Question

我在这里使用 Bootstrap3 进行响应式页面设计。我在横幅内容中添加了一个框，其中包含一些文本，如下所示：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<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: 126px; width: 600px; background: rgba(255, 255, 255, 0.6); 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>

它在全屏模式下运行良好。当我调整浏览器大小时，对齐方式无法正常工作。内容框与页面不符。任何帮助将不胜感激！！

Answer 1

试试这个：

<div class="row" >
<!-- changing width to 100% with 600px maximum -->
<div class="col-md-7" style="border-left-width: 4px; top: auto; bottom: 126px; width: 100%; max-width: 600px; background: rgba(255, 255, 255, 0.6); 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>

不过这不会改变高度，为此尝试：

change "height:130px;" to "height: 100%; max-height: 130px;"

您确实需要阅读更多有关 Bootstrap 工作原理的信息，因为这不是使用它的好方法

Answer 2

首先，您不应该为 div 分配宽度，以防您使用 bootstrap。

<div class="col-md-7" style="...width: 600px...

使用 class col-md-7 为您的部分指定一个特定的宽度，以 % 为单位，这样当您调整浏览器大小时，div 也会相应地调整大小。但是，您用 600px 覆盖了宽度，这是一个固定宽度，不会随浏览器调整大小而变化。

Answer 3

尝试稍作改动的解决方案

演示 http://www.bootply.com/p6wIuR17QB

/* CSS used here will be applied after bootstrap.css */

#modest-slider {
  position: relative;
}
.slider-caption {
  position: absolute;
  bottom: 0;
  margin-bottom: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<section id="slider">

  <ul class="rslides list-unstyled" id="modest-slider" stye="position:relative;">

    <li class="slider-wrapper">

      <div class="slider-img-container">
        <img src="http://placehold.it/600x300&amp;text=slider1" alt="slider1" class="img-responsive">
      </div>

      <div class="slider-caption container">
        <div class="col-xs-10 col-sm-8" style="background: rgba(255, 255, 255, 0.6);">
          <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>

调整浏览器大小时对齐不正确 - 响应页面

Alignment not coming correcting when browser resizing - responsive page

html

css

twitter-bootstrap-3