Question

我有以下CSS：

.turbineContainer{
        width: 50%;
        flex-wrap: wrap;
        display: flex;
        
      }
      .turbineIcons{               
          background-color:white;           
          margin: 1em;
          height: 50px;
          width: 100px;
      }

      .container {
        display: flex;
       width: 100%;
      }
              
      .left-half {
        flex-wrap: wrap;
        display: flex;
        background-color: #f7941d;
        flex: 1;
      }
      
      .right-half {
        background-color: #8d5022;
        flex: 1;
      }

这是我的HTML：

    <div class="container">
          <div class="left-half">
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>       
        </div> 
        <div class="right-half">
          here is the Right Panel             
          </div>
        </div>

我将页面分为左侧和右侧两部分，我将宽度100％覆盖了整个页面的宽度，但是看到的是这两部分位于页面中间，因此我得到的

的屏幕截图

Answer 1

从类.container来看，您正在使用引导程序，对吗？它具有最大宽度，这就是为什么宽度不是100％的原因。

容器是Bootstrap中最基本的布局元素，使用我们的默认网格系统时需要。从响应中选择定宽容器（表示每个容器的最大宽度会发生变化断点）或流体宽度（意味着它一直都在100％宽）。

将.container-fluid用于全角容器，该容器跨越视口的整个宽度。

https://getbootstrap.com/docs/4.0/layout/overview/

Answer 2

这是工作示例：

.container {
    display: flex;
}

.container .left-half .turbineIcons{               
    background-color:white;           
    flex: 1;
    margin: 1em;
    min-width: 25%;
    height: 50px;
}
                  
.container .left-half {
    flex-wrap: wrap;
    display: flex;
    background-color: #f7941d;
    flex: 1;
}
          
.container .right-half {
    background-color: #8d5022;
    flex: 1;
}

<div class="container">
    <div class="left-half">
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>       
    </div>
    <div class="right-half">here is the Right Panel</div></div>

flexbox宽度100％不能覆盖整个页面宽度

2 个答案: