主页 / 问题 / 1080333
Accepted
EgorG
Asked:2020-02-09 21:07:39 +0000 UTC2020-02-09 21:07:39 +0000 UTC

如何修复引导程序 4 中的列宽？

  • 772

有一个布局

<div className='container app'>
<div className="row align-items-center justify-content-center content">
  <div className="col-7 col-content">
    <div className="row top-panel">
      <div className="col-8 left"></div>
      <div className="col right"></div>
    </div>
    <div className="row main">
      <div className="col-7 left"></div>
      <div className="col right"></div>
    </div>
  </div>
</div>

这是未来SPA应用的培训项目。如何使任何屏幕尺寸的 col-content 列的宽度保持不变（滚动条出现在小尺寸）？

css

1 个回答

  1. Best Answer

    从班级中删除col-7

    将width:750px;（您需要的宽度）添加到类col-content和.overflow-x:auto;content

    您也可以保留col-7，然后添加min-width:750px（禁止元素变得小于 750px）并再次添加overflow，如上所述。

    做了一个代码示例。我不明白为什么在你的标记className而不是 normalclass中，我怀疑这是一种像 ionic 这样的手机框架。

    .content {
  overflow-x: auto;
  text-align:center;
}

.col-content {
  min-width: 750px;
  background:#c3fffc;
  padding:30px 0px;
  border:1px solid #000;
}
.left{    background: #e8c3ff;
    border: 1px solid #000;
    padding: 30px 0px;
    margin-top:15px;
}
.right{
  background:#ddffc3;
  border:1px solid #000;
    padding: 30px 0px;
    margin-top:15px;
}
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class='container app'>
  <div class="row align-items-center justify-content-center content">
    <div class="col-7 col-content">
    col-content
      <div class="row top-panel">
        <div class="col-8 left">left</div>
        <div class="col right">right</div>
      </div>
      <div class="row main">
        <div class="col-7 left">left (main)</div>
        <div class="col right">right (main)</div>
      </div>
    </div>
  </div>

    • 1

相关问题