text 右侧边栏布局

Posted 2021-04-30

//----------------------------------------------
.col-sidebar,
.col-main {
  position: relative;
  padding-right: floor(($grid-gutter-width / 2));
  padding-left: ceil(($grid-gutter-width / 2));
}

//----------------------------------------------
.col-sidebar {
  @media (min-width: $screen-sm-min) {
    float: right;
    width: 30%;
    padding-left: 50px;
  }
}

//----------------------------------------------
.col-main {
  @media (min-width: $screen-sm-min) {
    float: left;
    width: 70%;
  }
}




<div class="row">
        <div class="col-main">main</div>
        <div class="col-sidebar">side</div>
    </div>