Question

我正在尝试使用Bootstrap和Adobe dreamweaver设计一个网站，该网站在桌面，手机和其他视图中均能正常工作，但是每当我选择在垂直智能手机上显示时，容器都不会使用全角。一些代码：

HTML

         <div class="container-fluid">
            <h1>¿Qué servicios ofrecemos?</h1>
            <br>
            <div class="row">
               <div class="col-xs-12 col-sm-12 col-lg-4">
                  <div class="card-header" style="width: 100%"></div>
                  <div class="card-body" style="width: 100%">
                     <h5 class="card-title">Diseños web responsive</h5>
                     <br>
                     <img style="width: 80%; margin-left: 10%" src=".\images\responsive.png">
                  </div>
                  <div class="card-footer text-muted" style="width: 100%">Nos encargamos de que tu sitio web luzca profesional y se adapte por igual a todos los dispositivos en los que se visualice.</div>
               </div>
               <div class="col-xs-12 col-sm-12 col-lg-4">
                  <div class="card-header"></div>
                  <div class="card-body">
                     <h5 class="card-title">Traducción de tu sitio web</h5>
                     <br>
                     <img style="width: 100%" src=".\images\traduccion.png">
                  </div>
                  <div class="card-footer text-muted">Traducimos tu sitio web a Español, Inglés y Polaco. Consulta nuestras tarifas de traducción.</div>
               </div>
               <div class="col-xs-12 col-sm-12 col-lg-4">
                  <div class="card-header"></div>
                  <div class="card-body">
                     <h5 class="card-title">Personalización</h5>
                     <br>
                     <img style="width: 100%" src=".\images\personalizacion.png">
                  </div>
                  <div class="card-footer text-muted">Diseñamos los elementos gráficos de tu web para que tenga su propia personalidad.</div>
               </div>
            </div>
      </section>

我希望它显示为：

第1列|第2栏|桌面中的第3列

，并且在移动设备中位于另一个上方。我想保留原始的1 | 2 | 3格式，但不知道是谁。问题是它按预期工作，但未获得完整宽度。这只是一个例子，问题发生在整个站点。

CSS

html{
    scroll-behavior: smooth;
}

body {
  padding-top: 56px;
}

.bg-image-full {
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

.custom-control-input:checked~.custom-control-label::before {
    color: white !important;
    background-color: green !important;
}

问题的一些图片

Desktop

Mobile

自从我尊重网格文档以来，这确实很奇怪，这是我怀疑唯一导致此问题的原因，事实并非如此。我只是想学习，如果我错过了什么，不要太苛刻。

编辑：我知道我使用的是'br'和独立样式标签，首先使用它们，然后使用CSS，这只是一个开始，因为有时我不希望切换标签。 / p>

谢谢！

为什么在垂直移动设备上无法获得全宽？

0 个答案: