Question

我想创建一个包含两个Div并与引导样式并排的页面。但是无法使用以下代码使其正确。有人能指导我。

谢谢，

 <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

<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的网格样式

Answer 2

第一个解决方案

使用display: inline-block;

＆＃13;

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

＆＃13;

<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>

＆＃13;

第二个解决方案

使用display: flex;

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

您必须将两个div连接起来并为它们提供适当数量的列。 Bootstrap基于12列布局。因此，如果你想并排两个div，那么两列数的加法应该低于或等于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 4

如果我完全理解你的愿望，这只是一个无引导的解决方案。将此代码段作为全屏运行。（展开代码段）

<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>

创建两个div并排的Bootstrap布局

4 个答案: