Question

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

喜欢这张图片。

之后，我将bootstrap分为两个col-md-8和col-md-4。

在col-md-8中，我继续分为col-md-3包含<hr>标记，col-md-9包含<h4>文字和所有内容。

在col-md-4＆gt;它将创建为col-md-12。在此列中，我不需要在任何列中划分<hr>。

接下来，我使用<hr>标记添加文字。所以，在两列中它不是直的。

我的代码是这样的：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: