引导问题。如何在小型设备上并排显示这些列？

Question

 .r1{ border:1px solid black; }.r2{ border:1px solid black; text-align:center; }.r3{ border:3px solid blue; text-align:center; }.t1{ border:1px solid red; background-color:red; text-align:center; border:1px solid black; }.head{ border:2px solid black; height:50px; background-color:green; }.c{ height: 100px; border: 1px solid black }.cell{ border: 5px solid green; }.r4{ }

 <,doctype html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1. user-scalable=no"> <link rel="stylesheet" href="stylo2:css"> <link rel="stylesheet" href="https.//necolas.github.io/normalize:css" /> <link href="https.//fonts.googleapis?com/css2:family=Russo+One&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min:css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https.//code.jquery.com/jquery-3.2.1.slim.min:js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min:js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div class="container-fluid"> <div class="row r1"> <div class="col-md-12"> <div class="row head"> <div class="col-md-12"> <div class="row"> <div class="col-md-1"> </div> <div class="col-md-1"> </div> <div class="col-md-9"> Content </div> <div class="col-md-1"> </div> </div> </div> </div> <div class="row head"> <div class="col-md-12"> <div class="row"> <div class="col-md-1"> </div> <div class="col-md-1"> </div> <div class="col-md-9"> Content </div> <div class="col-md-1"> </div> </div> </div> </div> <div class="row r1"> <div class="col-md-12 c"> Table1 </div> </div> <div class="row r2"> <div class="col-md-6 c"> Table2 </div> <div class="col-md-6 c"> Table3 </div> </div> <div class="row"> <div class="col-md-6"> <div class="row r3"> <div class="col-md-12"> <div class="row"> <div class="col-md-12 t1"> Heading </div> </div> <div class="row r"> <div class="col-md-1 cell"> 1 </div> <div class="col-md-5 cell"> ABC </div> <div class="col-md-5 cell"> 234 </div> <div class="col-md-1 cell"> 5 </div> </div> </div> </div> </div> <div class="col-md-6"> <div class="row r3"> <div class="col-md-12"> <div class="row"> <div class="col-md-12 t1"> Heading </div> </div> <div class="row playerrow"> <div class="col-md-1 cell"> 1 </div> <div class="col-md-5 cell"> ABC </div> <div class="col-md-5 cell"> 234 </div> <div class="col-md-1 cell"> 5 </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>

Hey, when I'm on a Desktop Screen, the code is fine, but when I switch to my mobile Device, i would like to have the content of my last row with the cells "1 ABC 234 5" besides each other too (like in desktop version) instead of each col building a new row.嘿，当我在桌面屏幕上时，代码很好，但是当我切换到我的移动设备时，我希望我最后一行的内容与单元格“1 ABC 234 5”彼此相邻（就像在桌面版本中一样）而不是每个 col 构建一个新行。 Also they shoud have a fixed with that not depends on its content.他们也应该有一个不取决于其内容的固定值。

Thanks in advance提前致谢

Answer 1

Easy.简单的。 Remove the -md- from the classes and leave col-1, col-5 etc. Then they won't be responsive.从类中删除 -md- 并留下 col-1、col-5 等。然后它们将不会响应。

引导问题。如何在小型设备上并排显示这些列？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-07-24 14:50:12

引导问题。 如何在小型设备上并排显示这些列？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-07-24 14:50:12

引导问题。如何在小型设备上并排显示这些列？

解决方案1
0 已采纳 2020-07-24 14:50:12