缺少声明宽度的引导轮播图像答案

【问题标题】：bootstrap carousel images short of declared width缺少声明宽度的引导轮播图像
【发布时间】：2016-10-31 13:39:09
【问题描述】：

我很好奇是否有人有解决这个问题的方法，其他帖子中没有提到。我已经尝试了其他帖子中提到的所有 UP 投票解决方案，但我的问题仍然存在。

具体来说，“示例”代码和“Stock”引导轮播似乎会为图像添加边距，从而使它们小于容器，并且不与页面上的其他容器对齐。

这是推荐的有效代码 - 但有我似乎无法“轻松”删除的边距。

<div class="container" style="margin-top:40px" >

    <div class="row" >

        <div class="col-sm-12" >

            <div id="carousel-msa" class="carousel slide" data-ride="carousel">

             <!-- Indicators -->
             ... carousel code...

我可以使用额外的“样式”参数强制它，但这会使图像无响应 - 我需要它响应。

<div id="carousel-msa" class="carousel slide" data-ride="carousel" style="margin-left:-15px; width:1200px">

如果您查看 JS Fiddle，您会看到图像被水平压缩，并且与其他元素不对齐。

https://jsfiddle.net/Le16u319/1/

到目前为止我看过的帖子 - 但谁的解决方案不能解决我的问题是：

Bootstrap Carousel image doesn't align properly

Twitter Bootstrap: Have carousel images full width and height

Bootstrap Carousel image doesn't align properly

非常感谢任何帮助。

【问题讨论】：

标签： css image twitter-bootstrap-3 carousel

【解决方案1】：

您不需要新课程。你需要简化你的代码。

删除<div class="col-sm-12" >。此块仅添加额外的填充。
删除style="margin-top:40px"。并从.MSA-masthead 类中删除position: absolute; 属性。
从所有幻灯片中删除 class="img-responsive center-block"。还要从 CSS 中删除 .inner-item {...} 和 .carousel img {...}。请改用此代码：

.carousel-inner img {
  height: auto;
  width: 100%;
}

当屏幕宽度小于 1200 像素时，您的页脚会添加长水平滚动。要修复它，请从 .MSA-footer 类中删除 width: 1200px; 属性。由于默认值，页脚的宽度将为 100%。

请查看结果：https://jsfiddle.net/glebkema/mrytx12L/

【讨论】：

喂！ - 完美的答案 - 非常感谢 - 正是我需要的输入类型。太好了！
@jpmyob 很高兴为您提供帮助。

【解决方案2】：

请参考这里，

在 CSS 中，添加

.slider{
  padding-left:0px !important;
  padding-right:0px !important;
}

这就是您所需要的，您可以忽略您在 CSS 中尝试的其他解决方案代码。

然后，确保在代码中添加对 Slider 类的引用，这里：

        <div class="container slider" style="margin-top:40px" >
            <div class="row" >
                <div class="col-sm-12" >
                    <div id="carousel-msa" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        ...

应该可以的。

【讨论】：