jquery - 无法在 iPhone 模型中将 Bootstrap 轮播居中

Question

我无法在 iPhone 模型中将我的 Bootstrap 轮播居中。它位于模型内部的左侧。到目前为止，我尝试了不同的方法但没有成功。

Webpage with the problem.

感谢所有帮助。

HTML代码:

header.masthead {
  position: relative;
  overflow-y: hidden;
  width: 100%;
  min-height: auto;
  color: white;
  background: url("../img/bg-pattern.png"), #00879b;
  background: url("../img/bg-pattern.png"), -webkit-linear-gradient(to right, #185a9d, #43cea2);
  background: url("../img/bg-pattern.png"), linear-gradient(to right, #185a9d, #43cea2); }

  header.masthead .header-content {
    position: relative;
    padding: 150px 0 50px;
    text-align: center; }
    header.masthead .header-content .header-content-inner {
      position: relative;
      max-width: 500px;
      margin: 0 auto; }
      header.masthead .header-content .header-content-inner h1 {
        font-size: 30px;
        margin-top: 0;
        margin-bottom: 30px; }
      header.masthead .header-content .header-content-inner .list-badges {
        margin-bottom: 25px; }
        header.masthead .header-content .header-content-inner .list-badges img {
          height: 50px;
          margin-bottom: 25px; }
  header.masthead .device-container {
    max-width: 300px;
    margin: 0 auto 100px; }
    header.masthead .device-container .screen img {
      border-radius: 3px;}
  @media (min-width: 768px) {
    header.masthead {
      min-height: 100%; }
      header.masthead .header-content {
        height: 100vh;
        min-height: 600px;
        padding: 0;
        text-align: left; }
        header.masthead .header-content .header-content-inner {
          position: absolute;
          top: 50%;
          max-width: none;
          margin: 0;
          transform: translateY(-50%); }
          header.masthead .header-content .header-content-inner h1 {
            font-size: 35px; }
      header.masthead .device-container {
        max-width: none;
        max-height: calc(100vh - 100px);
        margin: 100px auto 0; } }
  @media (min-width: 992px) {
    header.masthead .header-content .header-content-inner h1 {
      font-size: 50px; } }

section.download {
  position: relative;
  padding: 150px 0; }
  section.download h2 {
    font-size: 50px;
    margin-top: 0; }
  section.download .badges .badge-link {
    display: block;
    margin-bottom: 25px; }
    section.download .badges .badge-link:last-child {
      margin-bottom: 0; }
    section.download .badges .badge-link img {
      height: 60px; }
    @media (min-width: 768px) {
      section.download .badges .badge-link {
        display: inline-block;
        margin-bottom: 0; } }
  @media (min-width: 768px) {
    section.download h2 {
      font-size: 70px; } }

section.features .section-heading {
  margin-bottom: 100px; }
  section.features .section-heading h2 {
    margin-top: 0; }
  section.features .section-heading p {
    margin-bottom: 0; }

section.features .device-container,
section.features .feature-item {
  max-width: 300px;
  margin: 0 auto; }

section.features .device-container {
  margin-bottom: 100px; }
  @media (min-width: 992px) {
    section.features .device-container {
      margin-bottom: 0; } }

section.features .feature-item {
  margin-bottom: 100px;
  text-align: center; }
  section.features .feature-item h3 {
    font-size: 30px; }
  section.features .feature-item i {
    font-size: 80px;
    background: #43cea2;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #185a9d, #43cea2);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #185a9d, #43cea2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }

<div class="col-sm-5">
                    <div class="device-container">
                        <div class="device-mockup iphone6 portrait white">
                            <div class="device">
                                <div class="screen">
                                    <!-- Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! -->
                                    <div id="carousel-device-mockup" class="carousel slide" data-ride="carousel">
                                        <!-- Wrapper for slides -->
                                        <div class="carousel-inner" role="listbox">
                                            <div class="carousel-item active">
                                              <div class="screen">
                                              <img src="img/menu.png" alt="1" class="img-fluid">
                                              </div>
                                            </div>
                                            <div class="carousel-item">
                                              <div class="screen">
                                              <img src="img/order.png" alt="2" class="img-fluid">
                                              </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <img src="img/Order_Details.png" class="img-fluid" alt=""> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Answer 1

对于 .carousel-item.active，将其更改为 display:block 而不是 flex，对于 .img-fluid，将其更改为 max-width:none；宽度:100%；这将解决问题。