如何在两个Bootstrap列之间直接添加两行？(How to add two rows straight between two Bootstrap columns?)

 我想要一行直接添加两行。 
 
 喜欢这张图片。 
 
  
 
 之后，我将bootstrap分为两个col-md-8和col-md-4 。 
 
 在col-md-8我继续划分为col-md-3包含<hr>标记， col-md-9包含<h4>文本和所有内容。 
 
 在col-md-4 >中，它将创建为col-md-12 。 在这列中，我不需要在任何列中划分<hr> 。 
 
 接下来，我使用<hr>标签添加文本。 所以，在两列中它不直。 
 
 我的代码是这样的： 
 
 
 
 
 
  
div.hr_tinkhuyenmai{
    height: 1px;
    width: 10%;
    background-color: #ffa800;
}
div.title_tinkhuyenmai{
    font-family: tahoma;
    display: flex;
    align-items: center;
    justify-content: left;
}

div.group_title_hr{
    font-size: 20px;
    font-family: roboto_regular;
    display: flex;
    align-items: center;
    justify-content: right
    margin-top: 20px;
}

div.title_child_breakingnews{
    width: 10%;
    float: right
}
div.hr_child_breakingnews{
    width: 30%;
    height: 1px;
    background-color: #ffa800;
}
 
  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid remove_padding" style="background-color: #f8f8f8;margin-top: 20px">
  <div class="row">
    <div class="col-md-12">
      <div class="col-md-8">
        <div class="title_tinkhuyenmai">
          <div class="col-md-3 hr_tinkhuyenmai"></div>
          <div class="col-md-9">
            <h4>TIN KHUYẾN MÃI</h4>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="group_title_hr col-md-12">
          <div class="title_child_breakingnews text-right">TIN NỔI BẬT</div>
          <div class="hr_child_breakingnews text-right"></div>
        </div>
      </div>
    </div>
  </div>
</div>
 
 
 
 

I want two rows I added straight in a line.
 
Like this image.
 
 
After, I divide bootstrap to two col-md-8 and col-md-4.
 
In col-md-8 I continues divide to col-md-3 contain <hr> tag and col-md-9 contain <h4> text and all content.
 
In col-md-4 > it will create to col-md-12. In this columns, I don't need divide <hr> in any columns.
 
Next, I add text with <hr> tag. So, in two columns it not straight.
 
My code like this:
 
 
 
 
 
  
div.hr_tinkhuyenmai{
    height: 1px;
    width: 10%;
    background-color: #ffa800;
}
div.title_tinkhuyenmai{
    font-family: tahoma;
    display: flex;
    align-items: center;
    justify-content: left;
}

div.group_title_hr{
    font-size: 20px;
    font-family: roboto_regular;
    display: flex;
    align-items: center;
    justify-content: right
    margin-top: 20px;
}

div.title_child_breakingnews{
    width: 10%;
    float: right
}
div.hr_child_breakingnews{
    width: 30%;
    height: 1px;
    background-color: #ffa800;
}
 
  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid remove_padding" style="background-color: #f8f8f8;margin-top: 20px">
  <div class="row">
    <div class="col-md-12">
      <div class="col-md-8">
        <div class="title_tinkhuyenmai">
          <div class="col-md-3 hr_tinkhuyenmai"></div>
          <div class="col-md-9">
            <h4>TIN KHUYẾN MÃI</h4>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="group_title_hr col-md-12">
          <div class="title_child_breakingnews text-right">TIN NỔI BẬT</div>
          <div class="hr_child_breakingnews text-right"></div>
        </div>
      </div>
    </div>
  </div>
</div>
 
 
 
 

原文：https://stackoverflow.com/questions/39265001