响应全宽自举旋转木马左侧有小图像,右侧有标题

时间:2016-08-06 06:06:13

标签: html css twitter-bootstrap

我想要做的就是这里的例子是小提琴

我有.carousel-inner{min-widt=500px;}用于大屏幕尺寸(我希望它有响应)

现在我的问题是我希望第一个旋转木马滑块图像从顶部和底部位于我的旋转木马的中间左侧位置。和标题位于右侧中心,即

我已经尝试过这段代码...但是当我使用较小的设备时,图片会显示在标题上。

https://jsfiddle.net/xe05ro61/4/

2 个答案:

答案 0 :(得分:1)

您可以只添加宽度:100%;在你的问题解决之后,我想你的形象。

尝试以下css:

的CSS:

.item img {
  width: 100%;
}

请参阅Fiddle Demo Link

答案 1 :(得分:0)

您经常需要为小屏幕使用特定的css规则,以使您的网站适应任何浏览器大小。 为了实现这一点,常见的方法是使用@media。 要定义仅针对宽度小于640像素的屏幕的css规则,请使用:

.myclass{
   background:red;
  }
@media screen and (max-width: 640px) {
.myclass{
   background:green;
  }
}

在电脑屏幕上,您将获得红色背景,在小型手机屏幕上,绿色背景。

现在,用位置规则替换这些无用的颜色定义。