关于移动响应能力的Slick Accordion CSS问题

时间：2018-06-24 02:02:18

标签： html css twitter-bootstrap css3 twitter-bootstrap-3

我很难弄清楚如何使这款Slick手风琴具有完全的移动响应能力，似乎一切都与我尝试过的东西重叠。

这是台式机上的手风琴（可完美运行）：

enter image description here

以下是移动响应手风琴的尺寸（小于等于991px）：

enter image description here

所以我似乎无法弄清楚如何使所有内容像移动版本一样内联，我尝试了Display / Position / etc ..属性，但失败了。

代码如下：

#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 个答案:

答案 0 :(得分：3)

尝试以下给定的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>

答案 1 :(得分：0)

一切都弄清楚了，因为我已经使用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更改已解决了问题。

相关问题
最新问题