我想要两行我直接添加成一行。
喜欢这张图片。
之后,我将 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>
最佳答案
如果你想像图片一样设计,你必须遵循这个指令:
------------:------------------- ----------------- -------------------------------
| <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
关于html - 如何在两个 Bootstrap 列之间直接添加两行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39265001/