控制HTML溢出/可见性

时间：2016-01-16 13:22:53

标签： javascript html css twitter-bootstrap flexbox

我正在使用引导程序三列设计开发一个站点，其中分页控件需要遵守以下约束：

  1. 适合中间栏。
  2. 保留一行而不包装到多行。
  3. 保持敏感。我不需要＆＃34;完全＆＃34; /＆＃34;流畅＆＃34; col-xs到col-xl响应，只是在col-md之上流动的东西，我可以为col-xs和col-sm实现替代。

    4. 我完全无法弄明白我怎么能得到该死的事情。

    ＆＃39;基地＆＃39;有点像这样：

    ＆＃13;
    ＆＃13; 
    .pagination-button {
  font-size: 2em;
}
    ＆＃13; 
    <!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- MDB core CSS -->
<link href="http://mdbootstrap.com/mdbcdn/mdb.min.css" rel="stylesheet">   
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"  rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/mdbcdn/mdbcdn/mdb.min.js"></script>
<body>
  <div class='container-fluid'>
    <div class='row'>
      <div class='col-xs-2'>
        <div class="card-panel">
          <span>Foo</span>
        </div>
      </div>
      <div class='col-xs-8'>
        <ul class="pagination">
          <li>
            <a class="pagination-item" href="?page=1"><i style="font-size: 2em" class="pagination-button fa fa-angle-double-left"></i></a>
          </li>
          <li>
            <a class="pagination-item" href="?page=1"><i style="font-size: 2em" class="pagination-button fa fa-angle-left"></i></a>
          </li>
          <li>
            <a class="pagination-item" href="?page=1">1</a>
          </li>
          <li class="active">
            <a class="pagination-item" href="?page=2">2</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=3">3</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=4">4</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=5">5</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=6">6</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=7">7</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=8">8</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=9">9</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=10">10</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=11">11</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=12">12</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=13">13</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=14">14</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=15">15</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=16">16</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=17">17</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=18">18</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=19">19</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=20">20</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=21">21</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=22">22</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=23">23</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=24">24</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=25">25</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=26">26</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=27">27</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=28">28</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=29">29</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=30">30</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=31">31</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=32">32</a>
          </li>
          <li>
            <a class="pagination-item" href="?page=3"><i style="font-size: 2em" class="pagination-button fa fa-angle-right"></i></a>
          </li>
          <li>
            <a class="pagination-item" href="?page=32"><i style="font-size: 2em" class="pagination-button fa fa-angle-double-right"></i></a>
          </li>
        </ul>
      </div>
      <div class='col-xs-2'>
        <div class="card-panel">
          <span>Foo</span>
        </div>
      </div>
    </div>
  </div>
</body>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    我能够把它清理成一行：

    ＆＃13;
    ＆＃13; 
    .pagination-button {
  font-size: 2em;
}
.pagination {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 1;
  justify-content: center;
  white-space: nowrap;
}
    ＆＃13; 
    <!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- MDB core CSS -->
<link href="http://mdbootstrap.com/mdbcdn/mdb.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="http://mdbootstrap.com/mdbcdn/mdbcdn/mdb.min.js"></script>

<body>
  <div class='container-fluid'>
    <div class='row'>
      <div class='col-xs-2'>
        <div class="card-panel">
          <span>Foo</span>
        </div>
      </div>
      <div class='col-xs-8'>
        <ul class="pagination">
          <li>
            <a href="?page=1"><i style="font-size: 2em" class="pagination-button fa fa-angle-double-left"></i></a>
          </li>
          <li>
            <a href="?page=1"><i style="font-size: 2em" class="pagination-button fa fa-angle-left"></i></a>
          </li>
          <li><a href="?page=1">1</a>
          </li>
          <li class="active"><a href="?page=2">2</a>
          </li>
          <li><a href="?page=3">3</a>
          </li>
          <li><a href="?page=4">4</a>
          </li>
          <li><a href="?page=5">5</a>
          </li>
          <li><a href="?page=6">6</a>
          </li>
          <li><a href="?page=7">7</a>
          </li>
          <li><a href="?page=8">8</a>
          </li>
          <li><a href="?page=9">9</a>
          </li>
          <li><a href="?page=10">10</a>
          </li>
          <li><a href="?page=11">11</a>
          </li>
          <li><a href="?page=12">12</a>
          </li>
          <li><a href="?page=13">13</a>
          </li>
          <li><a href="?page=14">14</a>
          </li>
          <li><a href="?page=15">15</a>
          </li>
          <li><a href="?page=16">16</a>
          </li>
          <li><a href="?page=17">17</a>
          </li>
          <li><a href="?page=18">18</a>
          </li>
          <li><a href="?page=19">19</a>
          </li>
          <li><a href="?page=20">20</a>
          </li>
          <li><a href="?page=21">21</a>
          </li>
          <li><a href="?page=22">22</a>
          </li>
          <li><a href="?page=23">23</a>
          </li>
          <li><a href="?page=24">24</a>
          </li>
          <li><a href="?page=25">25</a>
          </li>
          <li><a href="?page=26">26</a>
          </li>
          <li><a href="?page=27">27</a>
          </li>
          <li><a href="?page=28">28</a>
          </li>
          <li><a href="?page=29">29</a>
          </li>
          <li><a href="?page=30">30</a>
          </li>
          <li><a href="?page=31">31</a>
          </li>
          <li><a href="?page=32">32</a>
          </li>
          <li>
            <a href="?page=3"><i style="font-size: 2em" class="pagination-button fa fa-angle-right"></i></a>
          </li>
          <li>
            <a href="?page=32"><i style="font-size: 2em" class="pagination-button fa fa-angle-double-right"></i></a>
          </li>
        </ul>
      </div>
      <div class='col-xs-2'>
        <div class="card-panel">
          <span>Foo</span>
        </div>
      </div>
    </div>
  </div>
</body>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    如何清理此列表以使其响应更快？ CSS只会很棒，​​但经过几个小时试图让它工作，我甚至愿意接受基于JavaScript的方法来解决我遇到的这个UX / UI问题。

    如果我能用优先级标记每个<li>元素，然后按优先级顺序将元素添加到<ul>，直到它们填充允许的宽度，我认为我可以很容易地解决它但是我不知道如何很好地实现这样的东西并避免所有常见的浏览器边缘情况，而且我会把CSS抛到窗外去做，我还是希望他们的答案更简单。

2 个答案:

答案 0 :(得分：0)

目前，.pagination未显示为inline-flex。 Bootstrap也使用该类并使其成为内联块。将.pagination更改为ul.pagination，以便选择您的CSS（因为它更具体）。 这将强制所有列表项在一行中。

根据你的需要，你可以给ul一个最大宽度并使用overflow-x：scroll;在你的CSS中。您可能需要添加宽度：100％;为你的ul.pagination。

答案 1 :(得分：0)

抱歉，我不够具体。我已将我的建议放在下面的代码段中。 （检查ul.pagination CSS块） 它适合中间列，并保持在一行。

取决于你想要的部分主要是关于响应，有几种方法可以做到这一点。这是一个设计/互动问题。我建议overflow-x：scroll;对此。

node_modules
.pagination-button {
  font-size: 2em;
}
ul.pagination {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 1;
  justify-content: center;
  white-space: nowrap;
  width: 100%;
  overflow-x: scroll;
}

相关问题
最新问题