Is there a way to manage col-sm children with justify-content-end parent?-CodePudding

I am trying to set 3 divs to the right of the screen, stacked horizontally, just to be stacked vertically on small screen. justify-content-end works perfectly on parent div until I use col-sm in children, then I lose the justification. Why would col-sm dismiss the use of justification? How can I solve this?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<div >
  <div >Some action 1</div>
  <div >Another action 2</div>
  <div >Triple divs 3</div>
</div>

The code above works and justifies perfectly, but does not set items vertically stacked on small screens. The code below must do it but it just won't!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<div >
  <div >Some action 1</div>
  <div >Another action 2</div>
  <div >Triple divs 3</div>
</div>

CodePudding user response：

Sometimes custom CSS is needed. I don't see a way to do this with Bootstrap classes, so we can make one in the same pattern as other sizing classes to set automatic width over the md breakpoint.

I had to prepend body and use !important to override w-100.

@media (min-width: 768px) {
  body .w-md-auto {
    width: auto !important;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<div >
  <div >Some action 1</div>
  <div >Some action 2</div>
  <div >Some action 3</div>
</div>

CodePudding user response：

Use col-auto instead of col-sm

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
  <div >
    <div >Some action 1</div>
    <div >Another action 2</div>
    <div >Triple divs 3</div>
  </div>
  
  <div >
    <div >Some action 1</div>
    <div >Another action 2</div>
    <div >Triple divs 3</div>
  </div>

</body>
</html>

CodePudding user response：

You should use col-sm-[1-12] for this. I think for this use col-sm-4.