如何使用引导程序使页面响应所有设备尺寸？

时间：2019-02-15 15:38:32

标签： css twitter-bootstrap

我是一个初学者，所以我从Bootstrap复制了很多代码。 我的页面对某些设备具有响应能力，但对于1024px屏幕尺寸，响应速度不是很好。有人可以帮我修复我的CSS代码吗？

我知道它需要在CSS的@media查询内部进行一些修复，但我无法做到。我真的需要一些帮助。

HTML,
body,
header,
.view {
  height: 100%;
}

@media (max-width: 740px) {
  html,
  body,
  header,
  .view {
    height: 1000px;
  }
}

@media (min-width: 800px) and (max-width: 850px) {
  html,
  body,
  header,
  .view {
    height: 600px;
  }
}

.btn .fa {
  margin-left: 3px;
}

.top-nav-collapse {
  background-color: #424f95 !important;
}

.navbar:not(.top-nav-collapse) {
  background: transparent !important;
}

@media (max-width: 991px) {
  .navbar:not(.top-nav-collapse) {
    background: #424f95 !important;
  }
}

.btn-white {
  color: black !important;
}

h6 {
  line-height: 1.7;
}

.rgba-gradient {
  background: -moz-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
  background: -webkit-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
  background: -webkit-gradient(linear, 45deg, from(rgba(42, 27, 161, 0.7)), to(rgba(29, 210, 177, 0.7)));
  background: -o-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
  background: linear-gradient(to 45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
}

body,
html {
  height: 100%;
}

.bg {
  /* The image used */
  background-image: url("assets/imgs/beach-enjoyment-exercise-1390403.jpg");
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

body {
  background-color: rgb(250, 250, 250);
}

.row h3 {
  color: rgb(199, 197, 197);
  font-size: 15px;
}

.row h1 {
  color: rgb(102, 100, 100);
  font-size: 30px;
}

@media (min-width: 992px) {
  .row {
    display: grid;
    width: 700px;
    float: left;
    margin-left: 90px;
    margin-top: 60px;
  }
}

@media (min-width: 768px) {
  .row {
    display: grid;
    width: 700px;
    float: left;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 60px;
  }
}

@media only screen and (max-width: 480px) {
  .callout-wrap,
  .vertical_photo {
    margin-top: 10px;
  }
  .banner-left,
  .banner-right,
  .content-left-side,
  .content-right-side {
    width: 100%;
  }
  .border_drop_bg {
    margin-top: 10px;
    width: 100%;
  }
  .vertical_photo {
    display: none;
  }
}

.row {
  background-color: rgb(232, 232, 236);
  padding: 30px;
  margin-left: 20x;
  margin-right: 2px;
  margin-top: 60px;
}

.container {
  position: relative;
}

.container a {
  width: 100%;
  display: grid;
  color: rgb(255, 255, 255);
  background-color: gray;
  text-decoration: none;
  height: 50px;
  text-align: left;
  padding-top: 12px;
  padding-left: 15px;
}

.container img {
  width: 25px;
  position: absolute;
  display: flex;
  justify-content: flex-end;
  margin-left: 85%;
}

.row p {
  color: rgb(98, 95, 95);
}

.mySlides {
  display: none;
}

.mySlides {
  width: 100%;
  height: auto;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>

<header>
  <!--slides-->
  <div class="bg"></div>
  <!--slides-->
</header>

<main>
  <!--slides-->
  <div class="container-for-two-row-ellements">
    <div class="row">
      <div class="col">
        <h1>Podologie • Posturologie</h1>
        <h3>— Pierre-Marie HAUDRY</h3>
        <div class="container">
          <div class="panel-group" id="accordion">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible</a>
                </h4>
              </div>
              <div id="collapse1" class="panel-collapse collapse in">
                <div class="card card-body">Lorem ipsum dolor
                  <br> sit amet, consectetur adipisicing elit,
                  <br/> sed do eiusmod tempor incididunt ut labore et
                  <br/> dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                  et d
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Exercitation</a>
                </h4>
              </div>
              <div id="collapse2" class="panel-collapse collapse">
                <div class="card card-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem
                  ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem
                  ipsum dolor sit amet, con sed d sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Consectetu</a>
                </h4>
              </div>
              <div id="collapse3" class="panel-collapse collapse">
                <div class="card card-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">dolore</a>
              </h4>
            </div>
            <div id="collapse4" class="panel-collapse collapse">
              <div class="card card-body">is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse5"> ullamco</a>
              </h4>
            </div>
            <div id="collapse5" class="panel-collapse collapse">
              <div class="card card-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem
                ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum
                dolor sit amet, con sed d sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="w3-content w3-display-container">
          <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
            </ol>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img class="d-block w-100" src="assets/imgs/img1.jpg" alt="First slide">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src="assets/imgs/img2.jpg" alt="Second slide">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src="assets/imgs/img3.jpg" alt="Third slide">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src="assets/imgs/img4.jpg" alt="Third slide">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100" src="assets/imgs/img5.jpg" alt="Third slide">
              </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--slides-->
</main>

<footer></footer>

2 个答案:

答案 0 :(得分：1)

您可以按班级设置响应式网格。

类前缀： .col-，.col-sm-，.col-md-，.col-lg-，.col-xl-。

关于Grid system

的信息 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="bg-primary col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="bg-secondary col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="bg-success col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="bg-danger col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

答案 1 :(得分：0)

您需要对网格（Bootstrap中的“ powerfull”功能）进行红色修改 Grids Layouts

完全“响应”的DIV将是这样的：

<div class="col-lg-4 col-md-6 col-sm-10 col-xs-12">
相关问题
最新问题