将引导行与其旁边的标签对齐

-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

将引导行与其旁边的标签对齐

回答

相关问题