我试图在单个 Bootstrap 行中的两个文本框之间放置破折号“-”。我目前没有破折号，当我把它放进去时，它会在文本框上方而不是旁边附加“-”。
我的代码如下所示(它使用带有 prime-ng 库的 angular 2):
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<p-dropdown [options]="fieldsForDropdown" [(ngModel)]="selectedField" (onChange)="onFieldChanged($event)"></p-dropdown>
</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">
<input pInputText class="form-control" type='date' [(ngModel)]="fromVal" (change)="addFROMFilter($event)" />
</div>
<div class="col-lg-4 col-md-3 col-sm-12">
<input pInputText class="form-control" type='date' [(ngModel)]="toVal" (change)="addTOFilter($event)" />
</div>
<div class="col-lg-1 col-md-3 col-sm-12">
<button class="btn btn-default btn-lg" (click)="applyDateFilter($event)">Apply</button>
</div>
</div>
我希望它看起来像这样
如果可能的话，我希望四个元素之间的间距也相等。
提前致谢
最佳答案
试试这个
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" />
<style>
.bdr {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 15px;
height: 2px;
background-color: #000;
}
@media only screen and (max-width: 550px) {
.mt_10 {
margin-top: 5px;
margin-bottom: 5px;
}
.bdr {
height: 15px;
width: 2px;
}
.mb_40 {
margin-bottom: 40px;
}
}
</style>
</head>
<body>
<div class="col-xs-12 col-sm-12">
<div class=" col-xs-12 col-sm-3 mt_10">
<p-dropdown [options]="fieldsForDropdown" [(ngModel)]="selectedField" (onChange)="onFieldChanged($event)"></p-dropdown>
</div>
<div class="col-xs-12 col-sm-7" style="position:relative; padding:0;">
<div class="col-xs-12 col-sm-6 mt_10 mb_40">
<input pInputText class="form-control" type='date' [(ngModel)]="fromVal" (change)="addFROMFilter($event)" />
</div>
<div class="bdr"></div>
<div class="col-xs-12 col-sm-6 mt_10">
<input pInputText class="form-control" type='date' [(ngModel)]="toVal" (change)="addTOFilter($event)" />
</div>
</div>
<div class="col-xs-12 col-sm-2 mt_10">
<button class="btn btn-default btn-lg" (click)="applyDateFilter($event)">Apply</button>
</div>
</div>
</body>
</html>关于javascript - 将 Bootstrap 行与其旁边的标签对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39655378/