Css 您知道为什么搜索图标没有显示为白色背景色,并且下拉列表没有在右侧对齐吗?
我想有一个布局,有一个页眉和一个fotoer和页眉和页脚之间有一些与职位列表项目。我正在使用引导,我希望标题如下所示: 但它不起作用,它的显示方式如下: “搜索”图标没有白色背景,并且“过滤器1”和“过滤器2”下拉列表没有像图像中那样在右侧对齐。你知道为什么吗 HTML: 看看是否对你有帮助Css 您知道为什么搜索图标没有显示为白色背景色,并且下拉列表没有在右侧对齐吗?,css,twitter-bootstrap,Css,Twitter Bootstrap,我想有一个布局,有一个页眉和一个fotoer和页眉和页脚之间有一些与职位列表项目。我正在使用引导,我希望标题如下所示: 但它不起作用,它的显示方式如下: “搜索”图标没有白色背景,并且“过滤器1”和“过滤器2”下拉列表没有像图像中那样在右侧对齐。你知道为什么吗 HTML: 看看是否对你有帮助 .bg-custom-light2{ 背景色:#fafafa; } .input group text、.input group prepend{ 背景色:无; } .输入组文本{ 颜色:灰色; } .
.bg-custom-light2{
背景色:#fafafa;
}
.input group text、.input group prepend{
背景色:无;
}
.输入组文本{
颜色:灰色;
}
.过滤器{
宽度:自动;
显示:内联块;
}
.搜索图标{
背景色:#ffffff!重要;
边框:1px实心#ced4da!重要;
右边框:1px实心透明!重要信息;
}
.搜索输入{
左边框:1px实心透明!重要信息;
}
-
- 列表项目1
- 列表项目2
容器页脚
谢谢,你知道为什么搜索表单和过滤器没有在中心垂直对齐吗?例如,搜索表单上方的空间大于搜索表单下方的空间。有关div中元素垂直对齐的详细信息,请参阅本主题:
<div class="container py-5">
<div class="row">
<div class="col">
<ul class="list-group forum">
<li class="list-group-item bg-custom-light2 py-4">
<div class="row">
<form class="col-5">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
<input type="email" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Search">
</div>
</div>
</form>
</div>
<div class="col-7 text-right">
<div class="dropdown">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 1
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">item1</a>
</div>
</div>
<div class="dropdown">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter 2
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">item1</a>
</div>
</div>
</div>
</li>
<li class="list-group-item">list item 1</li>
<li class="list-group-item">list item 2</li>
<li class="list-group-item bg-custom-light2 py-4">container footer</li>
</ul>
</div>
</div>
</div>
.bg-custom-light2{
background-color: #fafafa;
}
.input-group-text, .input-group-prepend{
background-color:none;
}
.input-group-text{
color:gray;
}