我正在一个网站上工作，使其响应。我想实现一个css网格系统与bootstrap 4.
但我没有设法使它与以下代码工作:
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<p>Lorem ipsum</p>
</div>
<div class="col-sm-8">
<p>lorem ipsum.</p>
</div>
</div>
</div>现在代码看起来像这样:
<style type="text/css">
body {
margin: 0 auto;
padding: 0 auto;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
margin-top: 110px;
margin-left: 100px;
padding: 0;
text-align: left;
width: 100%;
background-color: transparent;
position: fixed;
height: 100%;
overflow: auto;
align-items: center;
list-style-type: none;
font-size: 14px !important;
}
.sidebar {
margin: 0;
margin-top: 110px;
padding: 0;
text-align: left;
width: 100%;
background-color: transparent;
position: fixed;
height: 100%;
overflow: auto;
align-items: center;
list-style-type: none;
font-size: 14px !important;
}
.sidebar a {
display: block;
color: #666666;
padding: 8px;
text-decoration: none;
list-style-type: none;
}
.sidebar li {
list-style: none;
text-decoration: none;
}
.sidebar a.active {
background-color: transparent;
color: #4d4d4d;
list-style-type: none;
}
.sidebar a:hover:not(.active) {
background-color: transparent;
color: rgb(49, 49, 49);
}
div.content {
margin-left: 300px;
margin-top: 100px;
margin-bottom: 100px;
padding: 1px 16px;
height: 100%;
}
#LP_img {
align-items: center;
}
div.preview {
margin-left: 300px;
margin-top: 100px;
margin-bottom: 10px;
padding: 1px 16px;
height: 100%;
}
@-webkit-keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
@keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@media screen and (max-width: 1000px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
text-align: center;
margin-bottom: 0px !important;
}
.sidebar a {
float: left;
align-items: center;
}
div.content {
margin-left: 0;
}
div.preview {
margin-left: 0;
}
.caption {
text-align: center !important;
}
.containerCarousel {
margin-top: 0px;
margin-bottom: 150px;
width: 1fr;
}
}
@media screen and (max-width: 730px) {
.sidebar a {
text-align: center;
float: none;
}
.sidebar {
margin-top: 20px !important;
margin: 0 auto !important;
}
.content {
margin-top: 10px !important;
}
.preview {
margin-top: 10px !important;
}
.caption {
text-align: center !important;
}
}
</style><!doctype html>
<html lang="en">
<head>
<title></title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- ========== NAVBAR START ========== -->
<div class="container">
<div class="row">
<div class="col sidebar">
<li><a class="active" href="./index.html"><b>Christoph Urwalek</b></a></li>
<li><a href="./painting.html">painting</a></li>
<li><a href="./drawing.html">drawing</a></li>
<li><a href="#">collage</a></li>
<li><a href="#">video</a></li>
<li><a> </a></li>
<li><a> </a></li>
<li><a href="#">current</a></li>
<li><a href="#">text</a></li>
<li><a href="#">biography</a></li>
<li><a href="#">contact</a></li>
</div>
</div>
</div>
<!-- ========== NAVBAR END ========== -->
<!-- ========== MEDIA-THUMBNAIL START ========== -->
<div class="container">
<div class="preview">
<div class="row">
<div class="thumbnail ">
<img id="LP_img"
src="./assets/img/Wandcollage.jpg">
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>这将是理想的我，如果我有一个网格系统，它分为2列。列内的内容应该垂直居中并响应，以便页面适合平板电脑和智能手机。
遗憾的是，我没有任何经验，因此期待你的帮助。提前感谢!友好的问候
<div class="container-fluid">
<div class="col-12 col-md-6 text-center"></div>
<div class="col-12 col-md-6 text-center"></div>
</div>