Question

我使用HTML设置了带有年龄选择器的Bootstrap JS Popover页面。我得到以下输出1，我想实现输出2和后续任务

li列为输出2的衬垫。
li应该是可点击的，只需点击li它就会出现在按钮文字中。

输出1

输出2

 $(document).ready(function() {
   $('#age-select-1').popover({
     content: "<ul><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li></ul>",
     html: true,
     trigger: "focus",
     placement: "bottom"
   });
 });

#age-select-1 li {
  float: left;    /*not working*/
  display: inline; /*not working*/
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <label class="label nav-label">Age</label>
    <button class="btn nav-age-select" id="age-select-1">21</button>
  </div>
</body>

</html>

Answer 1

更改了列表中的CSS - 给了它自己的类

基本上，浏览器会添加自己的填充，因此我们只需重新整形，将宽度设置为25％即可实现效果

＆＃13;

 $(document).ready(function() {
   $('#age-select-1').popover({
     content: "<ul class='foo'><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li></ul>",
     html: true,
     trigger: "click",
     placement: "bottom"
   });
 });

＆＃13;

.foo { padding-left: 0; }
.foo li {
  float: left;
  display: inline-block;
  width: 25%;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <label class="label nav-label">Age</label>
    <button class="btn nav-age-select" id="age-select-1">21</button>
  </div>
</body>

</html>

＆＃13;

Answer 2

此#age-select-1 li无法使用，因为li不是#age-select-1元素，但您可以为ul提供ID并将您的css更改为#column li }

＆＃13;

$(document).ready(function() {
   $('#age-select-1').popover({
     content: "<ul id='column'><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li></ul>",
     html: true,
     trigger: "focus",
     placement: "bottom"
   });
 });

＆＃13;

#column li {
  float: left;    /* working*/
  display: inline; /* working*/
}

＆＃13;

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <label class="label nav-label">Age</label>
    <button class="btn nav-age-select" id="age-select-1">21</button>
  </div>
</body>

</html>

＆＃13;

如何自定义Bootstrap JS Popover

2 个答案: