时间戳

首页 > 解决方案 > Bootstrap 中的响应列，主列位于中心

html - Bootstrap 中的响应列，主列位于中心

问题描述

我想使用 Bootstrap 进行此配置

配置

这需要像图像显示的那样响应。我尝试了此代码，但块 2 未在页面中居中

<div class="row" style="margin: 0 auto; width: 800px; margin-top: 20px; max-width:800px;position:relative" >
    <div class="col" style="top:420px;background: white; z-index:100;position:fixed; width: 194px;">
                
                   block 1
    </div>
    <div class="col">
              block 2
    </div>
</div>

当我向上和向下滚动页面时，我还需要左侧的块 1 跟随

有什么建议么？

标签： htmlcsstwitter-bootstrap

解决方案

您可以使用媒体查询来实现这一点，而无需任何引导程序。这是代码：

<html>
<head>
<style>

@media (max-width:850px){
.mycontainer{
  display: flex;
  flex-direction: column-reverse;
}

.myleft{
  order: 1;
  width: 97%;
  margin-right: 1.5%;
  margin-left: 1.5%;
  background-color: white;
}

.mymain{
  order: 2;
  width: 97%;
  margin-right: 1.5%;
  margin-left: 1.5%;
  background-color: white;
}

}


@media (min-width:850px){


.mycontainer{
  display: flex;
  flex-direction: row;
}

.myleft{
  order: 1;
  width: 30%;
  margin-right: 2%;
  margin-left: 2%;
  background-color: white;
}

.mymain{
  order: 2;
  width: 60%;
  margin-right: 2%;
  padding-left: 2%;
  background-color: white;
  border-left: 1px solid #e9ecef;
}

}

</style>
</head>
<body>


<div class="mycontainer">
      <div class="myleft">left column content</div>
      <div class="mymain">my main content</div>
</div>




</body>
</html>

要使主列内容居中，您可以使用 css 对其进行样式设置。

推荐阅读