Question

我正在使用Bootstrap 3.3.6开发一个站点

我已经按照教程创建了一个响应式横幅滑块：http://www.jqueryscript.net/slider/Full-Width-Responsive-Carousel-with-jQuery-Bootstrap.html

我希望有选项可以在横幅的右侧或左侧放置文本（位于.carousel-caption内），占据可用宽度的50％。

我对第一张幻灯片的标记是这样的：

<div class="carousel-inner">
    <div class="item active">
        <div class="fill" style="background-image:url('foo.jpg');"></div>
        <div class="carousel-caption">
            <h3>Hello World</h3>                
            <p>Some more text</p>
        </div>
    </div>
</div>

使用以下CSS（它保留在左侧），将其置于右侧不起作用。好像right: 0;没有被遵守，即使.carousel-caption完全使用Bootstrap定位。

.carousel-caption {  
   max-width: 500px;
   top: 0;
   right: 0;
   bottom: auto;    
}

我也意识到将max-width设置为500px并不是非常理想，但是当我尝试50％它似乎继承了整个浏览器窗口的宽度？

Answer 1

默认情况下，标题为right:20%; left: 20%，因此只将右侧更改为0才会向右移动。您需要将左侧更改为50％（如果您只想将其设置为半宽）：

.carousel-caption {
  max-width: 500px;
  top: 0;
  right: 0;
  left: 50%;
  bottom: auto;
}

虽然，现在我注意到你有一个最大宽度，所以不确定这是从左边还是右边开始。要解决此问题，您需要取消左侧并添加50％的宽度：

.carousel-caption {
  width: 50%;
  max-width: 500px;
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
}

这应该使它正确对齐，50％宽度，最大宽度为500px，但总是放在右边

右：0不会使用绝对定位

1 个答案: