问题描述
我已经设计了标题，并且在该标题中我使用下拉菜单，我想减小下拉菜单的宽度，但是当我要减少右侧的下拉菜单时，会出现间隙，所以如何我可以缩小宽度而右侧没有间隙吗？
以下是此示例，
https://angular-bootstrap-4-starter-xwebdr.stackblitz.io
这是代码，
<header class="position-fixed w-100 bg-white" style="z-index: 1000;">
<!-- <div class="text-right p-2" style="border-bottom: 1px solid #ededed;">
<label class="m-0">contact@emedimart.com | <span class="cursor-pointer">Contact Us</span></label>
</div> -->
<nav class="navbar navbar-expand-lg navbar-light bg-warning text-white">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- <a class="navbar-brand" href="#">E Medimart</a> -->
<a class="navbar-brand" href="#">
<img src="../../assets/logo.png" style="width:150px;">
</a>
<form class="w-100 mt-2 mt-lg-0">
<div class="input-group">
<div class="input-group-prepend">
<select
class="form-control border-radius-none h-auto w-75"
[(ngModel)]="selectedCategory"
name="selectedCategory"
(change)="headerCategoryChange($event)">
<option value="" selected>All Categories</option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
</div>
<div style="position: relative; flex: 1 1 auto; width: 1%; min-width: 0; margin-bottom: 0;">
<input type="text" class="headinput form-control border-radius-none h-auto"
placeholder="Search for All Products" aria-label="Search" aria-describedby="basic-addon1" name="searchInput"
#searchbar (keyup)="fetchSeries($event)" [(ngModel)]="searchInput" autocomplete="off">
<ul style="position:absolute;z-index:1;
background: white;color: black;
padding:0px 15px;max-height:70vh;overflow-y: scroll; width: 100%;" class="list-unstyled itemsearch"
*ngIf="searchoutput" (clickOutside)="onClickedOutside($event)"><!--(clickOutside)="onClickedOutside($event)"-->
<li *ngFor="let show of searchResult" class="py-2 border-top border-secondary">
<div class="row align-items-center">
<div class="col-md-2 d-flex justify-content-center align-items-center"
style="width: 100px; height: 50px;">
<img [src]="API_BASE_URL + show.imgPaths[0]" class="img-fluid d-inline-block mx-auto"
style="max-width: 100%; max-height: 100%;" />
</div>
<div class="col-md-5 py-2">
<h4 class="text-dark mb-0">
<a (click)="product_details(show._id)"
class="d-inline-block mb-1">{{show.productName}}</a><br/>
<span class="border-top border-secondary d-inline-block pt-1">{{show.packing}}</span>
</h4>
<h5 class="text-secondary mb-0">{{show.manufacturer}}</h5>
</div>
<div class="col-md-4 d-flex flex-column align-items-end mx-0 px-0">
<div class="text-center">
<h4 class="text-dark mb-0">Rs.{{show.finalPrice}}/-</h4>
<div class="d-flex flex-row justify-content-center align-items-center">
<input type="text"
class="mr-1 text-center"
value="{{count}}"
name="count"
style="width:35px;" #cnt
(keypress)="numberOnly($event)" type="text"/>
<button class="btn btn-sm btn-warning"
style="font-size:10px;"
(click)="addtocartbynumber(show._id,cnt.value)">
Add to cart
</button>
</div>
{{msg}}
<!-- <app-addtocart [id]="show._id"></app-addtocart> [(ngModel)]="count"-->
</div><!--(clickOutside)="onClickedOutside($event)"-->
</div>
</div>
</li>
</ul>
</div>
<!--*ngIf="searchResult.length>0"-->
<div class="input-group-append text-right text-md-left d-block d-md-flex">
<button class="btn btn-secondary h-100 border-radius-none" type="button">Search</button>
</div>
</div>
</form>
<div class="collapse navbar-collapse justify-content-end w-50" id="navbarTogglerDemo01">
<ul class="navbar-nav mt-2 mt-lg-0" *ngIf="!isTypeUser">
<li class="nav-item border-right">
<button mat-button class="text-white" (click)="sellwithusBtnClick()">Sell With Us</button>
</li>
<li class="nav-item border-right">
<button mat-button class="text-white" (click)="loginBtnClick()">Sign in/Register</button>
</li>
<li class="nav-item">
<button mat-button class="text-white" (click)="viewcartBtnClick()">Cart<span
class="badge badge-pill badge-primary ml-2 pt-1 mt-n1">
{{cartCount}}</span>
</button>
</li>
</ul>
<ul class="navbar-nav mt-2 mt-lg-0" *ngIf="isTypeUser">
<li class="nav-item border-right d-flex justify-content-center align-items-center">
<div class="dropdown">
<button class="btn btn-warning text-white dropdown-toggle" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Welcome {{userinfo.fullName}}
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" (click)="userBtnClick('/user/profile')">Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" (click)="userBtnClick('/user/myorders')">My Orders</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" (click)="userBtnClick('/user/invoices')">Invoices</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" (click)="userlogout()">logout</a>
</div>
</div>
</li>
<li class="nav-item">
<button mat-button class="text-white" (click)="viewcartBtnClick()">Cart<span
class="badge badge-pill badge-primary ml-2 pt-1 mt-n1">
{{cartCount}}</span>
</button>
</li>
</ul>
</div>
</nav>
</header>
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）