Bootstrap 如何创建2个全屏列,第一个与响应图像和第二个与文本

8tntrjer  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(112)

我试着建立一个有两列的页面。第一列我想占屏幕的70%,另一列占20%。
在第一栏中,我试着用css或脚本来放置一个响应图像,但没有什么能让我满意。
你知道吗?
示例:http://www.screencast.com/t/0SddrUSln5
一些技巧如下:

  1. Bootstrap ...
<div class="col-xs-12 col-sm-6 col-lg-10">
    <img src="img/intro_img.jpg" alt="" style="width:100%;">
</div>

<div class="col-xs-6 col-lg-2">
sidebar
</div>

1.全屏jQuery脚本
http://blog.aaronvanderzwan.com/2012/07/maximage-2-0/
但我不知道如何生成一个侧边栏,“推”全屏图像,不重叠.
1.类“响应-img”
图片从来没有填充70% ορ 80%的屏幕和一个非常薄的白色边缘存在于底部。实际上在83,67....%当它去84%滚动条出现,所以没有全屏列。

vyu0f0g1

vyu0f0g11#

不知道你的要求是什么....但是如果你想把div的宽度设置为只占屏幕的20%,你可以使用这个:

#div{
width: 20%
}

那么只需创建一个id为div的div标签,它将占据屏幕的20%。
这就是你的要求吗?

相关问题