bootstrap container row col
阿新 • • 發佈:2018-12-13
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head> <body> <div class="jumbotron"> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-8" style="background-color: red;">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4" style="background-color: green">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <!-- Optional: clear the XS cols if their content doesn't match in height --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div> </div> </div> </body> </html>
在電腦大瀏覽器中顯示
在小瀏覽器中顯示