文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Bootstrap 4中使列根据视区水平或垂直对齐？

问如何在Bootstrap 4中使列根据视区水平或垂直对齐？
EN

Stack Overflow用户

提问于 2020-12-26 23:37:49

回答 2查看 52关注 0票数 0

我有一个如下设置-

.left {
  height: 100vh;
  background-color: #208ea3;
}

.right {
  height: 100vh;
  background-color: #37a862;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" color="green">
  <div class="row justify-content-md-start">

    <div class="col-lg-3 left d-flex align-items-center justify-content-center" id="first-section">
      <div class="text-center">
        <div class="row-fluid align-items-center justify-content-center h-100">
          <div class="col-xl-6" id="dynamic-columns">
              some quotations
          </div>

          <div class="col-xl-6" id="dynamic-columns">
            <h3>title</h3>
              Some text  
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-9 right" id="next-section">
      more text
    </div>

  </div>
</div>

我想给#dynamic-columns分配一些属性，这样当屏幕的max-height为500px时，列就会占据100%的高度并并排排列。到目前为止，这种水平对齐不会发生，如果有更多的文本，底部的#dynamic-columns将被#next-section隐藏。

我的要求来自于这样一个事实，即许多手机在横向模式下的高度约为500px，这使得我无法在#first-section中垂直显示内容。因此，我希望将它们水平对齐，以便第一个#dynamic-columns位于屏幕的左侧，第二个位于屏幕的右侧。

我认为以下查询将是必要的，但我无法找到属性-

@include (max-height:500px) {
  #dynamic-columns {
      display: ??
    }
    
}

html

css

twitter-bootstrap

bootstrap-4

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-12-26 23:48:54

你可以像下面这样尝试。我将bootstrap版本更新为4.5，以便能够使用vh-100

.left {
  background-color: #208ea3;
}

.right {
  background-color: #37a862;
}

@media (max-height:500px) {
  .left > div {
      height:100%;
      width:50%;
    }
    
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" color="green">
  <div class="row">
    <div class="col-lg-3 vh-100 left d-flex flex-column flex-wrap justify-content-center text-center" id="first-section">
      <div class="d-flex flex-column justify-content-center">
        some quotations
      </div>
      <div class="d-flex flex-column justify-content-center">
        <h3>title</h3>
        Some text
      </div>
    </div>
    <div class="col-lg-9 vh-100 right" id="next-section">
      more text
    </div>

  </div>
</div>

票数 1

Stack Overflow用户

发布于 2020-12-26 23:51:58

我也找到了一种在纯CSS中实现你想要的东西的方法。我希望它能帮上忙。我发现的一件事是你在使用@include而不是@media。

* {
  margin: 0;
  padding: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.flex-container div {
  flex-grow: 1;
  color: white;
}

.column-1 {
  background: teal;
}

.column-2 {
  background: blue;
}

@media (max-height: 500px) {
  .flex-container {
    flex-direction: row;
  }
}

<body>
  <div class="flex-container">
    <div class="column-1">Column 1</div>
    <div class="column-2">Column 1</div>
  </div>
</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65457982

复制

相似问题

问如何在Bootstrap 4中使列根据视区水平或垂直对齐？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Bootstrap 4中使列根据视区水平或垂直对齐？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Bootstrap 4中使列根据视区水平或垂直对齐？
EN