Bootstrap Carousel 图像未正确对齐 [英] Bootstrap Carousel image doesn't align properly

查看：21
本文介绍了Bootstrap Carousel 图像未正确对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

请看下图，我们使用引导轮播来旋转图像.但是，当窗口宽度较大时，图像无法正确对齐边框.

但是无论窗口的宽度如何，bootstrap 提供的轮播示例始终可以正常工作.按照代码.

有人可以解释为什么轮播的行为不同吗?这与图像大小有关还是缺少某些引导程序配置?

<div class="item"><img alt="" src="/eboxapps/img/3pp-2.png"><div class="carousel-caption"><h4>2.创建请求

<div class="item"><img alt="" src="/eboxapps/img/3pp-3.png"><div class="carousel-caption"><h4>3.会发生什么?</h4>

<div class="item"><img alt="" src="/eboxapps/img/3pp-4.png"><div class="carousel-caption"><h4>4.状态已通过电子邮件发送</h4>

<!-- 轮播导航--><a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a><a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

解决方案

解决方案是将此 CSS 代码放入您的自定义 CSS 文件中:

.carousel-inner >.item >图片{边距:0 自动；}

Please take a look at the following image, we are using bootstrap carousel to rotate the images. However, when the window width is large, the image doesn't align with the border properly.

But the carousel example provided by bootstrap always works fine, no matter the width of the window. Following the code.

Can someone explain why carousel is behaving differently? Is this anything to do with Image size or some bootstrap config is missing?

<section id="carousel">
<div class="hero-unit span6 columns">
    <h2>Welcome to TACT !</h2>
    <div id="myCarousel" class="carousel  slide" >
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="item  active" >
            <img alt=""  src="/eboxapps/img/3pp-1.png">
            <div class="carousel-caption">
                <h4>1. Need a 3rd party jar?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-2.png">
            <div class="carousel-caption">
                <h4>2. Create Request</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-3.png">
            <div class="carousel-caption">
                <h4>3. What happens?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-4.png">
            <div class="carousel-caption">
                <h4>4. Status is Emailed</h4>
            </div>
        </div>
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>

解决方案

The solution is to put this CSS code into your custom CSS file:

.carousel-inner > .item > img {
  margin: 0 auto;
}

这篇关于Bootstrap Carousel 图像未正确对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆