时间戳

首页 > 解决方案 > 如何在不改变网站响应能力的情况下增加轮播的宽度

html - 如何在不改变网站响应能力的情况下增加轮播的宽度

问题描述

我使用了 width 属性

轮播示例控件{

宽度：1400px；

左：-270px；

} 但网站的整体规模正在发生变化。如图所示我需要这个完整的网站宽度轮播我只需要增加轮播的宽度。

在这里粘贴我的整个代码：

<!-- Required meta tags -->

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



<!-- Bootstrap CSS -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">



<title>Hello, world!</title>

身体 {

边距：0；

字体大小：28px；

字体系列：Arial、Helvetica、sans-serif；

}

。内容 {

填充：16px；

}

::-webkit-滚动条 {

display: none;

}

。内容{

宽度：1000px；

边距：0 自动；

}

轮播示例控件{

}

。卡片{

边框：无；

}

.card-body{

font-family: ProximaNova-Semibold,Helvetica,Arial,sans-serif;

font-size: 18px;

font-weight: 600;

font-style: normal;

font-stretch: normal;

letter-spacing: normal;

color: #4a4a4a;

}

h2 {

display: block;

font-size:30px;

margin-block-start:40px;

margin-block-end:20px;

margin-inline-start:0px;

margin-inline-end: 0px;

font-weight:bold;

字体样式：正常；

字体拉伸：正常；

字母间距：正常；

}

.slide-box img {

-ms-flex：0 0 25%；

flex: 0 0 25%;

max-width: 45%;

填充左：20px；

}

. 幻灯片框 {

justify-content: 之间的空格；

}

Link Link Disabled Mains Meals on offer Biriyanis Appetisers Fit N Fab前面一个后面一个

电源

泰国鸡肉碎饭碗 ₹180 ₹220 18% 折扣。

1656 收藏 200+ 今天购买

Gusteau - 烟熏料理鼠王卷饼 ₹200

下午 6:00 开始供应

30 favs-90+ 今天买了

辣椒粉卷饼 ₹200

下午 6:00 开始供应

33 最喜欢的 100+ 今天购买



黑豆素客家面 ₹160 ₹200 20% 折扣

910 收藏 150+ 今天购买

Peri Peri Chicken 'n' Quinoa Olive Rice ₹180 ₹230 22% 折扣

下午 6:00 开始供应

1315 收藏 500+ 今天购买

Jaipuri Kofta 'n' Laccha Paratha ₹170 ₹200 15% 折扣

379 收藏 150+ 今天购买

比里亚尼斯

泰国鸡肉碎饭碗 ₹180 ₹220 18% 折扣。

1656 收藏 200+ 今天购买

Gusteau - 烟熏料理鼠王卷饼 ₹200

下午 6:00 开始供应

30 favs-90+ 今天买了

辣椒粉卷饼 ₹200

下午 6:00 开始供应

33 最喜欢的 100+ 今天购买



黑豆素客家面 ₹160 ₹200 20% 折扣

910 收藏 150+ 今天购买

Peri Peri Chicken 'n' Quinoa Olive Rice ₹180 ₹230 22% 折扣

下午 6:00 开始供应

1315 收藏 500+ 今天购买

Jaipuri Kofta 'n' Laccha Paratha ₹170 ₹200 15% 折扣

379 收藏 150+ 今天购买

开胃菜

泰国鸡肉碎饭碗 ₹180 ₹220 18% 折扣。

1656 收藏 200+ 今天购买

Gusteau - 烟熏料理鼠王卷饼 ₹200

下午 6:00 开始供应

30 favs-90+ 今天买了

辣椒粉卷饼 ₹200

下午 6:00 开始供应

33 最喜欢的 100+ 今天购买



黑豆素客家面 ₹160 ₹200 20% 折扣

910 收藏 150+ 今天购买

Peri Peri Chicken 'n' Quinoa Olive Rice ₹180 ₹230 22% 折扣

下午 6:00 开始供应

1315 收藏 500+ 今天购买

Jaipuri Kofta 'n' Laccha Paratha ₹170 ₹200 15% 折扣

379 收藏 150+ 今天购买

<!-- Optional JavaScript -->

<!-- jQuery first, then Popper.js, then Bootstrap JS -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

标签： htmlcss

解决方案

您发布的页面可以使用width: 100%;元素.content和width: 100%. .carousel这是一个快速修复，但它适用于您的问题。

推荐阅读