bootstrap 3传送带固定高度

请参阅Bootstrap 3中同一个传送带的以下两张屏幕截图，其中包含不同尺寸的图像。bootstrap 3传送带固定高度

首先截图： enter image description here 二截图：

的Html用于内转盘。

<div class="carousel-inner" role="listbox"> 
    . 
    . 
    <div class="item"> 
     <img class="img-responsive center-block" src="..."> 
    </div> 
    . 
    . 
</div>

两个转盘和表包含在class="row"与内外它自己的class="col-md-6"。

正如你可以看到这是丑陋的旋转木马不断高度与图像的高度不断变化。我不接受“您的源图像应该都具有相同的高度”作为答案。

我想旋转木马的高度是固定的，并且图像应该相应地缩放（最好与桌子的高度相同）。此外，如果可能的话，我想解决这个提供的引导类之一，而不是添加自定义CSS。我已经read，增加了对转盘固定宽度（或高度），但我不觉得这是一个很好的解决方案，因为

自定义CSS
这不是响应，它应该保持col-md-6排队的一半！

那么有没有人知道解决这个问题的优雅，健壮和响应的方式？也许用Javascript？

备注我知道那里还有其他的轮播，但暗示这不是我的问题的答案。我的问题解决了bootstrap的传送带。

来源

2015-04-02 QuantumHive

你有没有找到一个好的解决方案？我有同样的问题@QuantumHive – caffeinescript 2016-03-02 02:49:26

我在旋转木马上的浏览器中对CSS进行了快速而肮脏的更改。这是一个小小的改变，似乎在诡计中。

我改变了CSS从

.carousel-inner>.item>img, .carousel-inner>.item>a>img { 
... 
}

到：

.carousel-inner>.item>img, .carousel-inner>.item>a>img { 
... 
     height: 200px; 
}

所以，如果你可以用图像高度设置为一个固定值居住，你可以试试。

来源

2015-04-02 09:40:51 Goerp

我知道这一点，因为我已经在我的问题中表明，这不是一个理想的答案。这意味着在每个设备上，转盘将具有这个高度。它需要有响应。除此之外，我正在寻找一种通用的解决方案来彻底解决Bootstrap轮播的问题。 – QuantumHive 2015-04-02 10:18:09

问题不是图像确实如你所要求的那样不被接受的答案。

BootStrap中的Col- *声明为“float：left”，因此不会听其兄弟的高度。这就是为什么传送带与桌子相比高度不同。

您可以做的是将父项和表的容器声明为“display：table-cell”，父项声明为“display：table;”。是的，与divs表格单元格。为什么不使用HTML表格呢。那么，td的立场总是彼此相邻，“display：table-cell”不是。如果他们需要更多空间（更具响应性），他们将“向下移动”。这是一个更合适的问题。

为了让它更好。我建议你使用已经用Col定义的行作为子对象，然后按照上一节中的描述创建一个表。这样做可以让您的主要设计符合需要。

来源

2015-04-02 11:37:27 Bart

我只是在每个项目之前和之后添加一个div标签。添加的div标签应嵌套在具有类“item”的div标签内。实际的轮播项目将嵌套在新添加的div标签内。这是在你的情况的一个例子：

<div class="carousel-inner" role="listbox"> 
    . 
    . 
    <div class="item"> 
     <div class="container" style="display:block;width:100%;height:350px;overflow:hidden;"> 

     <img class="img-responsive center-block" src="..."><!-- actual item --> 

     </div> 
    </div> 
    . 
    . 
</div>

则需要调整高度，以适应你的旋转木马最大的项目。而已。

来源

2016-06-14 08:14:04 hackmajor

然后，您的图像可以使用高度％来保持相对于新div容器大小的大小。 – hackmajor 2016-06-14 08:22:17

bootstrap 3传送带固定高度

回答

相关问题