Question

我将引导行用于两个div。我希望它们在大型设备上排成一排，但在小型设备上堆叠。 Bootstrap并没有将其堆叠在小型设备上，它们仍将它们保持在50％的水平。我所指的div是ID为left和themebox的div。

  <div class="container">
  <div class="row">
    <div id="left" class="col-sm-12 col-lg-3">
     <br>
     <br>
     <h3> Mine Style</h3>
     <br>
     <br>
    <button id="customize">Customize</button>
   </div>
   <div class="col-sm-12 col-lg-9" id="themebox"></div>



#themebox{
  height: 500px;
  background-color: white;
  float: right;
  box-shadow: 0 15px 45px 0 rgba(0,0,0,.1);
  padding-left: 0;
  padding-right: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.row{
 margin-left: 0 !important;
 margin-right:0 !important;
 }

Answer 1

您想要这个吗？

#themebox{
  height: 500px;
  background-color: white;
  float: right;
  box-shadow: 0 15px 45px 0 rgba(0,0,0,.1);
  padding-left: 0;
  padding-right: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.row{
 margin-left: 0 !important;
 margin-right:0 !important;
 }

h3 {
  margin:20px 0 !important;
}

#left {
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  justify-content:center;
}

@media (max-width: 992px) { 
  #left {
  align-items:center;
  flex-direction:row;
  justify-content:flex-start;
}
  
  #customize {
    margin:0 20px;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div id="left" class="col-12 col-sm-12 col-lg-3">
     <h3> Mine Style</h3>
    <button id="customize">Customize</button>
   </div>
   <div class="col-12 col-sm-12 col-lg-9" id="themebox"></div>

Bootstrap行未在小屏幕尺寸上堆叠div

1 个答案: