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

时间:2018-11-14 07:19:09

标签: html css

我在其中使用了width属性

carouselExampleControls {

width:1400px;

左:-270px;

} 但是网站的整体规模正在发生变化。 as shown in figure I need this full website width carousel我只需要增加轮播的宽度。

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

<!-- 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;

font-size:28px;

字体家族:Arial,Helvetica,sans-serif;

}

.content {

填充:16像素;

}

::-webkit-scrollbar {

display: none;

}

.content {

width:1000px;

margin:0自动;

}

carouselExampleControls {

}

.card {

border:none;

}

.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;

字体样式:正常;

font-stretch:正常;

字母间距:正常;

}

.slide-box img {

-ms-flex:0 0 25%;

flex: 0 0 25%;

max-width: 45%;

padding-left:20px;

}

.slide-box {

justify-content:间隔;

}

                  链接           链接           残障人士                     电源                 提供餐食            比里耶尼斯            开胃菜            飞度N Fab                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            以前                下一个      

电源

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

今天已购买1656个收藏夹超过200个

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

  从6:00 PM开始可用

  今天购买了30个favs-90 +

  Peppy辣椒粉卷饼   ₹200

   从6:00 PM开始可用

  今天已购买33个收藏超过100个



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

今天已购买910个收藏超过150个

  Peri Peri Chicken'n'Quinoa橄榄饭   ₹180₹230 22%OFF

  从6:00 PM开始可用

  今天购买了1315个收藏500+

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

  今天已购买379个收藏超过150个

Biriyanis

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

今天已购买1656个收藏夹超过200个

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

  从6:00 PM开始可用

  今天购买了30个favs-90 +

  Peppy辣椒粉卷饼   ₹200

   从6:00 PM开始可用

  今天已购买33个收藏超过100个



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

今天已购买910个收藏超过150个

  Peri Peri Chicken'n'Quinoa橄榄饭   ₹180₹230 22%OFF

  从6:00 PM开始可用

  今天购买了1315个收藏500+

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

  今天已购买379个收藏超过150个

开胃菜

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

今天已购买1656个收藏夹超过200个

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

  从6:00 PM开始可用

  今天购买了30个favs-90 +

  Peppy辣椒粉卷饼   ₹200

   从6:00 PM开始可用

  今天已购买33个收藏超过100个



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

今天已购买910个收藏超过150个

  Peri Peri Chicken'n'Quinoa橄榄饭   ₹180₹230 22%OFF

  从6:00 PM开始可用

  今天购买了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>

1 个答案:

答案 0 :(得分:0)

您发布的页面可以使用public Procedure GetByIndex(int index)throws ArrayIndexOutOfBoundsException { return VisitProcedure[index].getProcedure(); } 元素上的width: 100%;.content上的width: 100%进行固定。这是一个快速解决方案,但可解决您的问题。