將引導行與其旁邊的標籤對齊

-1

我試圖在單個引導行中的兩個文本框之間放置短劃線「 - 」。我現在沒有破折號，當我把它放在文本框的上方時，會將' - '附加在它旁邊。將引導行與其旁邊的標籤對齊

我的代碼如下所示（它採用了棱角分明2黃金NG庫）：

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

我希望它看起來像這樣

如果可能的話，我想它在四個元素之間也具有相等的間距。

在此先感謝

來源

2016-09-23 Mark

減小一個div的大小並放入一個div，填充右邊，填充左邊0和 - col-lg-1大小div –

div{ 
 
display:inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<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-2 col-md-4 col-sm-6 col-xs-6"> 
 
    <b>-</b> 
 
    </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>

來源

2016-09-23 07:48:08 Gowtham

嘗試添加 - ，並添加一些CSS樣式像

.dash { 
 
float:left; 
 
    width:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-xs-3"> 
 
     <select style="width:100%"><option></option></select> 
 
    </div> 
 
    
 
    <div class="col-xs-3"> 
 
     <input pInputText class="form-control" type='date' [(ngModel)]="fromVal" (change)="addFROMFilter($event)" /> 
 
    </div> 
 
     <b class="dash">-</b> 
 
    <div class="col-xs-3"> 
 
     <input pInputText class="form-control" type='date' [(ngModel)]="toVal" (change)="addTOFilter($event)" /> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <button class="btn btn-default btn-lg" (click)="applyDateFilter($event)">Apply</button> 
 
    </div> 
 
</div>

來源

2016-09-23 07:51:08 SaJed

您應該將引導樣式添加到片段，如果這樣做，您會看到解決方案不再工作。 –

您還可以使用引導分裂輸入字段並添加 - 在像這樣間，這將給你更多的靈活性：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<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-8 col-md-6 col-sm-6 col-xs-6"> 
 
    <div class="col-lg-5 col-xs-5"> 
 
     <input pInputText class="form-control" type='date' [(ngModel)]="fromVal" (change)="addFROMFilter($event)" /> 
 
    </div> 
 
    <div class="col-lg-1 col-xs-1"> 
 
     <strong>-</strong> 
 
    </div> 
 
    <div class="col-lg-5 col-xs-5"> 
 
     <input pInputText class="form-control" type='date' [(ngModel)]="toVal" (change)="addTOFilter($event)" /> 
 
    </div> 
 
    </div> 
 
    <div class="col-lg-1 col-md-3 col-sm-12 col-xs-12"> 
 
    <button class="btn btn-default btn-lg" (click)="applyDateFilter($event)">Apply</button> 
 
    </div> 
 
</div>

來源

2016-09-23 08:15:56

剛剛嘗試這一點

<!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 { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t bottom: 0; 
 
\t margin: auto; 
 
\t width: 15px; 
 
\t height: 2px; 
 
\t background-color: #000; 
 
} 
 
@media only screen and (max-width: 550px) { 
 
.mt_10 { 
 
\t margin-top: 5px; 
 
\t margin-bottom: 5px; 
 
} 
 
.bdr { 
 
\t height: 15px; 
 
\t width: 2px; 
 
} 
 
.mb_40 { 
 
\t 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>

來源

2016-09-23 09:50:04

將引導行與其旁邊的標籤對齊

回答

相關問題