css - 修复第一个 Div 并仅调整第二个 Div 的大小 - 第 2 列下的第 3 列
问题描述
这实际上是Bootstrap CSS - 第 2 列下的第 3 列关于调整大小的后续问题
我实际上想修复第一个 div 而根本不移动它
小型设备:
A column1
grade column2
column3
中型设备:
A column1 column2
grade column3
大型设备:
A column1 column2 column3
grade
并且只根据我原来的问题的解决方案移动其他列调整大小。
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="row">
<h1>A</h1>
</div>
<div class="row">
<span>grade</span>
</div>
</div>
<div class="col-md-11">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-6 col-xs-12">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
解决方案
您可以flex
为响应能力做一些事情,它会为您处理好事情:
这是小提琴
和
.container>.row{
display:flex;
}
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-1 both">
<div class="row">
<h1>A</h1>
</div>
<div class="row">
<span>grade</span>
</div>
</div>
<div class="col-md-11">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-6 col-xs-12">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
推荐阅读
- ruby-on-rails - rspec 验收测试中 Grape API 的哈希参数
- angular - Angular 6 http请求部分大型表单
- visual-studio-code - Visual Studio Code 的 C/C++ 扩展如何找到默认编译器?
- python - 网站每分钟刷新一次
- c# - C#发送数据最快的方式sql还是(TCPListener)
- c++ - 将长位数组映射到查找表
- elasticsearch - 带有通配符的 Elasticsearch 索引字段并搜索它
- unity3d - 如何在 ARCore 中使用 AssetBundled 3D 资产,而不是在 Andy Prefab 上使用
- android - 在 Android Unity 上找不到 gdiplus.dll
- php - 如何在循环内回显一个单词两次和另一个单词一次