html - 如何在两个 Bootstrap 列之间直接添加两行？

Question

我想要两行我直接添加成一行。

喜欢这张图片。

之后，我将 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>

Answer 1

如果你想像图片一样设计，你必须遵循这个指令:

------------:------------------- ----------------- -------------------------------
|    <hr>   |       TEXT       | |  Middle Div   | | Text |         <hr>         |
-------------------------------- ----------------- -------------------------------
            |                  |                        |   C1   |
            |      Image       |                        |   C2   |
            --------------------                        |   C3   |

代码模式:(对于标题部分)

    <div class="row">
       <div class="col-md-8">
           <div class="col-md-3">

           </div>

           <div class="col-md-9">

           </div>
       </div>

       <div class="col-md-4">
           <div class="col-md-x">

           </div>

           <div class="col-md-x">

           </div>
       </div>
    </div>

作为您的代码:

<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="col-md-12">
                             <div class="col-md-4 group_title_hr">
                                <div>TIN NỔI BẬT</div>
                             </div>

                             <div class="col-md-7" style="margin-top: 17px; ">
                                <div class="hr_child_breakingnews text-right"></div>
                             </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

** 让我们完成您的任务。 :P