如何使柔性行響應引導4

現就調整到手機屏幕彎曲箱溢出容器：

HTML：

 <div id="bars" class="d-flex flex-row text-white text-center"> 
      <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home"> 
       <i class="fa fa-home d-block"></i> Home 
      </div> 
      <div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#resume"> 
       <i class="fa fa-graduation-cap d-block"></i> Resume 
      </div> 
      <div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#work"> 
       <i class="fa fa-folder-open d-block"></i> Work 
      </div> 
      <div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#contact"> 
      <i class="fa fa-envelope d-block"></i> Contact 
      </div> 
      </div>

CSS，我試過媒體，但n othig改變

.port-item { 
width: 30%; 
} 

@media(min-width: 768px) { 
    #bars { 
    flex-direction: column; 
    } 
}

我怎樣才能使它們適合於容器或使它們顯示在列

來源

2017-09-16 lejhbah

你檢查文檔？以https://v4-alpha.getbootstrap.com/layout/grid/#responsive-classes開頭;） –

默認min-width是auto的柔性項在Flexbox的 - 所以加min-width: 0到port-item重置它。

現在盒子不會溢出容器。你也可以使用媒體查詢設定在較小的設備上的列流量：

@media screen and (max-width: 768px) { 
    #bars { 
    flex-direction: column !important; 
    } 
    .port-item { 
    width: 100%; 
    } 
}

請參見下面的演示：

.port-item { 
 
    width: 30%; 
 
    min-width: 0; 
 
} 
 

 
@media screen and (max-width: 768px) { 
 
    #bars { 
 
    flex-direction: column !important; 
 
    } 
 
    .port-item { 
 
    width: 100%; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<div id="bars" class="d-flex flex-row text-white text-center"> 
 
    <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home"> 
 
    <i class="fa fa-home d-block"></i> Home 
 
    </div> 
 
    <div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#resume"> 
 
    <i class="fa fa-graduation-cap d-block"></i> Resume 
 
    </div> 
 
    <div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#work"> 
 
    <i class="fa fa-folder-open d-block"></i> Work 
 
    </div> 
 
    <div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#contact"> 
 
    <i class="fa fa-envelope d-block"></i> Contact 
 
    </div> 
 
</div>

來源

2017-09-16 19:05:01 kukkuz

如何使柔性行響應引導4

回答

相關問題