Question

目前页面如下所示：

现在，在调整大小到移动屏幕时，灵活盒溢出容器：

Html：

       <div id="bars" class="d-flex flex-row text-white  text-center">
            <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home">
                <i class="fa fa-home d-block"></i> Home
            </div>
            <div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#resume">
                 <i class="fa fa-graduation-cap d-block"></i> Resume
            </div>
            <div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#work">
                 <i class="fa fa-folder-open d-block"></i> Work
            </div>
            <div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#contact">
            <i class="fa fa-envelope d-block"></i> Contact
            </div>
            </div>

CSS，我尝试过使用媒体但是没有改变

.port-item {
width: 30%;
}

@media(min-width: 768px) {
  #bars {
    flex-direction: column;
  }
}

如何使它们适合容器或使其显示在列

上

Answer 1

对于 flexbox 中的弹性项，默认min-width为auto - 因此请min-width: 0添加port-item至@media screen and (max-width: 768px) { #bars { flex-direction: column !important; } .port-item { width: 100%; } }重置它。

现在盒子不会溢出容器。您还可以使用媒体查询在较小的设备中设置列流：

.port-item {
  width: 30%;
  min-width: 0;
}

@media screen and (max-width: 768px) {
  #bars {
    flex-direction: column !important;
  }
  .port-item {
    width: 100%;
  }
}

见下面的演示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div id="bars" class="d-flex flex-row text-white  text-center">
  <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home">
    <i class="fa fa-home d-block"></i> Home
  </div>
  <div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#resume">
    <i class="fa fa-graduation-cap d-block"></i> Resume
  </div>
  <div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#work">
    <i class="fa fa-folder-open d-block"></i> Work
  </div>
  <div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#contact">
    <i class="fa fa-envelope d-block"></i> Contact
  </div>
</div>

    func configureCell(post: Post){
    self.post = post
    likesRef = FriendSystem.system.CURRENT_USER_REF.child("likes").child(post.postID)
    userRef = FriendSystem.system.USER_REF.child(post.userID).child("profile")

    self.captionText.text = post.caption
    self.likesLbl.text = "\(post.likes)"

    self.endDate = Date(timeIntervalSince1970: TimeInterval(post.time))

    userRef.observeSingleEvent(of: .value, with: { (snapshot) in
        let snap = snapshot.value as? Dictionary<String, Any>
        self.currentUser = MainUser(uid: post.userID, userData: snap!)
        self.userNameLbl.text = self.currentUser.username
        if let profileImg = self.currentUser.profileImage {
            self.profileImg.loadImageUsingCache(urlString: profileImg)
        } else {
            self.profileImg.image = #imageLiteral(resourceName: "requests_icon")
        }
    })

    // This is where I belive I need to determine wether or not the cell should have an image or not.
        if let postImg = post.imageUrl {
            self.postImg.loadImageUsingCache(urlString: postImg)
        }

Answer 2

由于Bootstrap类应涵盖此内容，因此不确定是否需要使用CSS对此进行排序。

将弹性类“ d-flex flex-row”替换为“ d-flex flex-column d-sm-flex flex-sm-row”

您的4件商品将自动在移动设备上堆叠，并排在其上方

如何使flex行响应Bootstrap 4

2 个答案: