关于移动响应的圆滑手风琴CSS问题
关于移动响应的圆滑手风琴CSS问题
提问于 2018-06-24 10:02:18
我有一段艰难的时间试图弄清楚我如何能够使这个光滑的手风琴完全移动响应，似乎所有的东西都重叠在我尝试过的所有东西上。
这是桌面上的Accordion (完美工作)：
以下是关于移动响应性的手风琴(991px及以下)：
所以我似乎想不出如何让所有的东西都像移动版本一样内联显示，我尝试过Display/Position/等。属性，并以惨败告终。
代码如下：
#AccordionHeadings {
font-weight: bolder;
color: slategrey;
font-size: medium;
}
.small {
height: 70px!important;
}
.small:hover {
background-color: #F8E498!important;
}
.col-md-1 {
padding: 0px!important;
margin-top: 5px!important;
}
#AccordionText {
margin-bottom: 0px!important;
color: gray;
}
#AccordIcon {
padding-right: 10px;
height:25px;
width: 25px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="row">
<div class="col-sm-8">
<h4>Choose the right app for the job!</h4>
<hr style="margin-top: 10px;"/>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
<img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" />
<span id="AccordionHeadings">File Storage and Sharing</span><span class="glyphicon glyphicon-menu-down pull-right"></span></a>
<div id="s0" class="sublinks collapse"> <!-- sublinks collapse -->
<a class="list-group-item small" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="col-md-1">
<img style="height: 32px; width: 45px;" src="https://i.imgur.com/e0a3j2l.png" />
</div>
<div class="col-md-11">
<h5>OneDrive</h5>
<p id="AccordionText">Store your files in one place, share them
with others, and get them from any device connected to the
Internet.</p>
</div>
</a>
<a class="list-group-item small" href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">
<div class="col-md-1">
<img src="https://i.imgur.com/uii8cJt.png" />
</div>
<div class="col-md-11">
<h5>SharePoint</h5>
<p id="AccordionText">Share and manage content, knowledge, and
applications to empower teamwork and quickly find information
within your organization.</p>
</div>
</a>
<a class="list-group-item small" href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">
<div class="col-md-1">
<img src="https://i.imgur.com/fV0AGNi.png" />
</div>
<div class="col-md-11">
<h5>Teams</h5>
<p id="AccordionText">Microsoft Teams is a chat-based workspace
offered in Office 365. Teams makes collaborating with your team
easy.</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我已经为您缩短了代码，这样就只有一个手风琴行可见，这样就不会有太多的代码，我还包括了适当的jQuery库和Bootstrap CDN库。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-25 10:44:28
我弄清楚了，因为我已经使用Sharepoint母版页和Bootstrap预定义了CSS，它不能很好地对齐，但这解决了问题。
@media (max-width: 992px)
{
#slick-slide02 {
display: visible!important;
}
.col-md-1 {
float: left!important;
margin-right: 10px!important;
}
.col-md-1 img {
height: auto!important;
width: 45px!important;
}
#AccordionText {
display: flex!important;
}
.small {
height: auto!important;
}
}
.small {
height: 70px;
}
简单的css更改已经解决了这个问题。
Stack Overflow用户
发布于 2018-06-24 12:16:48
尝试下面给定的html结构。基本上就是在锚点上添加d-flex align-items-center，并将heading和p元素保存在一个div中。并为您的图像添加高度和宽度。
#AccordionHeadings {
font-weight: bolder;
color: slategrey;
font-size: medium;
}
.small:hover {
background-color: #F8E498!important;
}
.list-group-item h5 {
margin-left: 10px;
}
#AccordionText {
margin-bottom: 0px!important;
color: gray;
margin-left: 10px;
}
#AccordIcon {
padding-right: 10px;
height: 25px;
width: 25px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="row">
<div class="col-12 col-md-10 col-md-8">
<h4>Choose the right app for the job!</h4>
<hr style="margin-top: 10px;" />
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
<img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" />
<span id="AccordionHeadings">File Storage and Sharing</span><span class="glyphicon glyphicon-menu-down pull-right"></span></a>
<div id="s0" class="sublinks collapse">
<!-- sublinks collapse -->
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/e0a3j2l.png" />
<div class="">
<h5>OneDrive</h5>
<p id="AccordionText">Store your files in one place, share them with others, and get them from any device connected to the Internet.
</p>
</div>
</a>
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/uii8cJt.png" />
<div>
<h5>SharePoint</h5>
<p id="AccordionText">Share and manage content, knowledge, and applications to empower teamwork and quickly find information within your organization.</p>
</div>
</a>
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/fV0AGNi.png" />
<div>
<h5>Teams</h5>
<p id="AccordionText">Microsoft Teams is a chat-based workspace offered in Office 365. Teams makes collaborating with your team easy.
</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51006393
复制相关文章
相似问题