主页 / 问题 / 1122257
Accepted
Proshka
Asked:2020-05-08 17:14:32 +0000 UTC2020-05-08 17:14:32 +0000 UTC

帮我解决一个带有独立块的 HTML 和 CSS 的问题

  • 772

最初的：

<style>
   .scheme{
      min-width: 750px;
   }
</style>

<div class="all">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 ">
                <p>content</p>
            </div>
        </div>
    </div>
    <div class="scheme">

    </div>
</div>
  1. 有一个块.container。这是引导容器。当屏幕宽度更改为较小的一侧时，它会按比例减小。
  2. 有一个块.scheme。此容器将包含不允许调整大小超过 750 像素的屏幕宽度的内容

必需的：

  1. 当屏幕达到 750 及以下时，Bootstrap 块按预期工作
  2. 该块.scheme应保持至少 750 像素宽，但只能滚动该块的宽度。即整个页面在Bootstrap网格下工作，这个block不会阻止页面被缩放，同时用户有机会使用水平滚动查看它。
html

1 个回答

  1. Best Answer

    .scheme {
  min-width: 750px;
}

@media (max-width: 992px) {
  .overflow-x-scroll {
    overflow-x: scroll!important;
  }
}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="all">
  <div class="container bg-info">
    <div class="row">
      <div class="col-xs-12 ">
        <p>content</p>
      </div>
    </div>
  </div>
  <div class="container overflow-x-scroll p-0">
    <div class="scheme bg-primary">
      Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

    • 2

相关问题