文章/答案/技术大牛

发布

社区首页 >问答首页 >是否有一种方法来管理以内容为目的的家长的孩子？

问是否有一种方法来管理以内容为目的的家长的孩子？
EN

Stack Overflow用户

提问于 2022-08-26 14:18:52

回答 1查看 39关注 0票数 1

我试图设置3 div到屏幕的右边，水平堆叠，只是垂直堆叠在小屏幕上。justify-content-end在父母div上很好地工作，直到我在孩子中使用col，然后我失去了理由。为什么col-sm会拒绝使用正当理由呢？我怎么才能解决这个问题？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="d-flex justify-content-end">
  <div class="order-1 p-2">Some action 1</div>
  <div class="order-2 p-2">Another action 2</div>
  <div class="order-3 p-2">Triple divs 3</div>
</div>

上面的代码工作得很好，也很合理，但是没有将项目垂直地堆放在小屏幕上。下面的代码必须这样做，但它就是做不到！

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="d-flex justify-content-end">
  <div class="order-1 p-2 col-sm">Some action 1</div>
  <div class="order-2 p-2 col-sm">Another action 2</div>
  <div class="order-3 p-2 col-sm">Triple divs 3</div>
</div>

css

bootstrap-4

react-bootstrap

html

回答 1

Stack Overflow用户

发布于 2022-08-26 21:07:48

使用col-auto而不是col-sm

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
  <div class="d-flex justify-content-end">
    <div class="order-1 p-2">Some action 1</div>
    <div class="order-2 p-2">Another action 2</div>
    <div class="order-3 p-2">Triple divs 3</div>
  </div>
  
  <div class="row g-0 justify-content-end">
    <div class="order-1 p-2 col-sm-auto">Some action 1</div>
    <div class="order-2 p-2 col-sm-auto">Another action 2</div>
    <div class="order-3 p-2 col-sm-auto">Triple divs 3</div>
  </div>

</body>
</html>

票数 1

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

原文链接：

https://stackoverflow.com/questions/73502447

复制

相似问题

问是否有一种方法来管理以内容为目的的家长的孩子？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否有一种方法来管理以内容为目的的家长的孩子？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否有一种方法来管理以内容为目的的家长的孩子？
EN