Question

我有两个div列，我想在屏幕上显示一行。请帮助我

<div class="container-fluid">
	<div class="row">
		<div class="col-md-3">
		</div>
		<div class="col-md-9">
		</div>
	</div>
</div>

Answer 1

您可以通过Bootstrap的border-right utility class使用以下命令。但是border实用程序上没有断点类：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 border-right">Column A</div>
    <div class="col-md-9">Column B</div>
  </div>
</div>

因此，如果您只想在specific breakpoint上显示边框，则可以使用如下所示的内容（边框仅在断点md和更高的位置可见）

.border-right.border-md {
  border-right-width:0!important;
}
    
@media (min-width: 768px) {
    .border-right.border-md {
       border-right-width:1px!important;
    }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 border-right border-md">Column A</div>
    <div class="col-md-9">Column B</div>
  </div>
</div>

您还可以将一些自定义SCSS代码添加到Bootstrap SCSS中，以将断点也添加到边界：https://github.com/twbs/bootstrap/issues/23892

Answer 2

尝试一下，希望对您有所帮助。谢谢

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
	<div class="row">
		<div class="col-sm-3 col-md-3">
      <label>Left Column</label>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
		<div class="col-sm-9 col-md-9 border-left">
      <label>Right Column</label>
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
    </div>
	</div>
</div>

如何在Bootstrap 4 HTML中的两列之间添加垂直hr线

2 个答案: