Question

在上面的演示中，我希望中间的“ col”会缩小，但是似乎有些阻止了它。该代码示例最初是针对使用ngx-bootstrap下拉菜单的angular 7应用程序，因此您将在下面的代码中看到这些属性。

不确定问题出在什么地方，引导程序4或CSS网格设置不正确

HTML供参考：

<div class="page-layout">
  <div class="page-header p-3">
    <div class="text-truncate" body>Main Header</div>
  </div>
  <div class="page-subheader p-3">
    <div class="text-truncate" body>Sub-Header</div>
  </div>
  <div class="page-content">

    <main role="main" class="container-fluid">
      <div class="row mx-3 my-3">

        <div class="col-auto p-0">
          <div class="row">
            <div class="index-number mb-3 font-weight-bold py-2">1</div>
          </div>
          <div class="row">
            <div class="index-number mb-3 font-weight-bold py-2">2</div>
          </div>
          <div class="row">
            <div class="index-number mb-3 font-weight-bold py-2">3</div>
          </div>
        </div>

        <div class="col px-0" cdkDropList>

          <div class="col mb-3 pr-0 ngFor" cdkDrag>
            <div class="card">
              <div class="row m-0">
                <div class="col-auto px-0" style="background:#ddd">
                  <div cdkDragHandle class="col-auto border-right draggable py-2">
                    Auto Left
                  </div>
                </div>
                <div class="col text-truncate py-2">
                  Center Text, This can be a pretty long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </div>
                <div class="col-auto border-left" style="background:#ddd">
                  <div class="btn-group py-2 ">
                    Auto-Right
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col mb-3 pr-0 ngFor" cdkDrag>
            <div class="card">
              <div class="row m-0">
                <div class="col-auto px-0" style="background:#ddd">
                  <div cdkDragHandle class="col-auto border-right draggable py-2">
                    Auto Left
                  </div>
                </div>
                <div class="col text-truncate py-2">
                  Center Text, This can be a pretty long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </div>
                <div class="col-auto border-left" style="background:#ddd">
                  <div class="btn-group py-2">
                    Auto-Right
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col mb-3 pr-0 ngFor" cdkDrag>
            <div class="card">
              <div class="row m-0">
                <div class="col-auto px-0" style="background:#ddd">
                  <div cdkDragHandle class="col-auto border-right draggable py-2">
                    Auto Left
                  </div>
                </div>
                <div class="col text-truncate py-2">
                  Center Text, This can be a pretty long text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </div>
                <div class="col-auto border-left" style="background:#ddd">
                  <div class="btn-group py-2">
                    Auto-Right
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </main>
  </div>
</div>

定义网格的SCSS：

.page-layout {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr;
  grid-template-rows: 56px 56px 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "page-header" "page-subheader" "page-content";

  .page-header {
    grid-area: page-header;
    background-color: #eee;
    border-bottom: solid 1px #bbb;
    height: 2em;
    min-height: 56px; //fix for ie
  }

  .page-subheader {
    grid-area: page-subheader;
    background-color: #eee;
    border-bottom: solid 1px #bbb;
    height: 2em;
    min-height: 56px; //fix for ie
  }

  .page-content {
    grid-area: page-content;
  }
}

没有CSS网格布局，它可以按预期工作： https://codepen.io/jakedx6/pen/EOxjWv（不含CSS网格的演示）

编辑：当我将网格1fr单位更改为100％时，它将按预期工作。有没有办法解决此问题并仍然使用1fr单位类型？

Answer 1

我实现的修复方法是在定义网格时使用100％而不是1fr。我很想知道是否有更好的方法来解决这个问题！

带Bootstrap 4的CSS Grid：将`col-auto`和`col`与fr单元一起使用时的布局问题

1 个答案: