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

我希望它看起来像这样

javascript - 将 bootstrap 行与旁边的标签对齐-LMLPHP

如果可能的话，我希望这四个元素之间也具有相等的间距。

提前致谢

最佳答案

试试这个

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