与两个Divs一起创建引导布局

Question

我想与Bootstrap样式并排创建一个页面。但无法通过以下代码做对。有人可以指导我吗？

谢谢，

 <style>
    .boxlayout {
    background-color: white ;
    border: 2px solid black;
    padding: 10px;
    margin: 10px;
}
</style>
<div class="border row boxlayout" style="float:left">
  <div class="border col-md-3">.col-md-3</div>
  <div class="border col-md-3">.col-md-3</div>
  <div class="border col-md-3">.col-md-3</div>
  <div class="border col-md-3">.col-md-3</div>
</div>
 <div class="border row boxlayout" style="float:right">
  <div class="border col-md-3">.col-md-3</div>

Answer 1

您必须连续将两个Divs放入，并给他们适当的列数。Bootstrap基于12列布局。因此，如果您想要两个divs并排添加两个列数应下或等于12：

<div class="row">
    <div class="border row col-md-6 boxlayout">
      <div class="border col-md-3">.col-md-3</div>
      <div class="border col-md-3">.col-md-3</div>
      <div class="border col-md-3">.col-md-3</div>
      <div class="border col-md-3">.col-md-3</div>
    </div>
    <div class="border row col-md-6 boxlayout">
      <div class="border col-md-3">.col-md-3</div>
</div>

Answer 2

1st解决方案

使用display: inline-block;

.boxlayout {
  background-color: white ;
  border: 2px solid black;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
}

<div class="border row boxlayout">
  <div class="border col-md-3">.col-md-3</div>
  <div class="border col-md-3">.col-md-3</div>
  <div class="border col-md-3">.col-md-3</div>
  <div class="border col-md-3">.col-md-3</div>
</div>
<div class="border row boxlayout">
  <div class="border col-md-3">.col-md-3</div>
</div>

第二解决方案

使用display: flex;

.container{
  display: flex;
  flex-direction: row;
}
.boxlayout {
  background-color: white ;
  border: 2px solid black;
  padding: 10px;
  margin: 10px;
}

<div class="container">
  <div class="border row boxlayout">
    <div class="border col-md-3">.col-md-3</div>
    <div class="border col-md-3">.col-md-3</div>
    <div class="border col-md-3">.col-md-3</div>
    <div class="border col-md-3">.col-md-3</div>
  </div>
  <div class="border row boxlayout">
    <div class="border col-md-3">.col-md-3</div>
  </div>
</div>

Answer 3

如果我完全理解您的愿望，这是仅自举的解决方案。将此片段作为全屏运行。（展开摘要）

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-3">Left 1</div>
            <div class="col-md-3">Left 2</div>
            <div class="col-md-3">Left 3</div>
            <div class="col-md-3">Left 4</div>
       </div>
    </div>
   <div class="col-md-6">  
        <div class="row">
            <div class="col-md-3">Right 1</div>
            <div class="col-md-3">Right 2</div>
            <div class="col-md-3">Right 3</div>
            <div class="col-md-3">Right 3</div>
       </div>
  </div>
</div>

Answer 4

使用boostrap v4.3.1，此处和此处阅读文档：

<div class="container">
    <div class="row justify-content-between"> 
        <div class="col-8">
            <h1 class="font-weight-bold">Hello</h1>
        </div>
        <div class="col-sm d-flex justify-content-end align-items-center">
            <h1 class="font-weight-bold">World</h1>
        </div>
    </div>
</div>

Answer 5

<div class="row">
  <div class="col-md-2">left</div>
  <div class="col-md-8">content</div>
  <div class="col-md-2">right</div>
</div>

请遵循Bootstrap的网格样式