Question

我想做什么？

开＆gt; 580px视口我在页脚中有一行有三列和On＆lt; = 580px我想只有两列，并希望将最后一列转换为一个新行。我意识到这只能用jQuery完成。

有什么问题？

出于某种原因，bootstrap似乎在＆lt; = 580px上向主体添加了padding-right。

我尝试了什么？

我尝试添加负填充和边距。
尝试将新行放在容器中。

我的代码：

var extraSmallDeviceReached = false;

function adjustFooterOnMobile() {

  function toDefault() {
    $('.follow, .resources').removeClass('col-xs-6');
    $('.briefDescrp').removeClass('row');
    $('.briefDescrp div').removeClass('col-xs-offset-1 col-xs-11');
    $('.follow, .resources, .briefDescrp').addClass('col-xs-4');
  }

  function onExtraSmallDevices() {
    $('.resources, .follow, .briefDescrp').removeClass('col-xs-4');
    $('.resources, .follow').addClass('col-xs-6');
    $('.briefDescrp').addClass('row');
    $('.briefDescrp div').addClass('col-xs-offset-1 col-xs-11');
  }

  if ($(window).width() < 581) {
    onExtraSmallDevices();
    extraSmallDeviceReached = true;
  } else if (extraSmallDeviceReached)
    toDefault();
}
adjustFooterOnMobile();
$(window).resize(function() {
  adjustFooterOnMobile();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<footer>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-4 resources">
        <h3> Resources </h3>
        <ul class="list-unstyled">
          <li> <a href="#">&nbsp; a </a> </li>
          <li> <a href="#">&nbsp; b </a></li>
          <li> <a href="#">&nbsp; c </a></li>
        </ul>
      </div>
      <div class="col-xs-4 follow">
        <h3> Follow </h3>
        <ul class="list-unstyled">
          <li>
            <a href="#"> &nbsp; x </a>
          </li>
          <li>
            <a href="#">&nbsp; y </a>
          </li>
          <li>
            <a href="#">> &nbsp; z </a>
          </li>
        </ul>
      </div>
      <div class="col-xs-4 briefDescrp">
        <div>
          <h3> Brief Description </h3>
          <hr>
          <p><strong> efgh.</strong></p>
        </div>
      </div>
    </div>
  </div>
</footer>

任何帮助都将受到高度赞赏。

Answer 1

这可以在没有jquery的情况下完成。根据您的HTML代码，请在样式表的末尾添加以下CSS。

=REGEXEXTRACT(A1,"^([^ ]+ [^ ]+) (.*)")

Answer 2

而不是bootstrap 4中的col-xs- {size}，你需要使用col- {size}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<footer>
  <div class="container-fluid">
    <div class="row">
      <div class="col-6 col-sm-4 resources">
        <h3> Resources </h3>
        <ul class="list-unstyled">
          <li> <a href="#">&nbsp; a </a> </li>
          <li> <a href="#">&nbsp; b </a></li>
          <li> <a href="#">&nbsp; c </a></li>
        </ul>
      </div>
      <div class="col-6 col-sm-4 follow">
        <h3> Follow </h3>
        <ul class="list-unstyled">
          <li>
            <a href="#"> &nbsp; x </a>
          </li>
          <li>
            <a href="#">&nbsp; y </a>
          </li>
          <li>
            <a href="#">> &nbsp; z </a>
          </li>
        </ul>
      </div>
      <div class="col-12 col-sm-4 briefDescrp">
        <h3> Brief Description </h3>
      </div>
    </div>
  </div>
</footer>

＆＃13;

Answer 3

终于找到了修复

通过更改此内容：

function toDefault() {
   $('.follow, .resources').removeClass('col-xs-6'); # change to col-xs-5
   $('.briefDescrp').removeClass('row'); # remove this
   $('.briefDescrp div').removeClass('col-xs-offset-1 col-xs-11'); # remove 'div'
   $('.follow, .resources, .briefDescrp').addClass('col-xs-4');
}

function onExtraSmallDevices() {
   $('.resources, .follow, .briefDescrp').removeClass('col-xs-4');
   $('.resources, .follow').addClass('col-xs-6'); # change to col-xs-5
   $('.briefDescrp').addClass('row'); # remove this
   $('.briefDescrp div').addClass('col-xs-offset-1 col-xs-11'); # remove 'div'
}

对此：

function toDefault() {
    $('.follow, .resources').removeClass('col-xs-5');
    $('.briefDescrp').removeClass('col-xs-offset-1 col-xs-11');
    $('.follow, .resources, .briefDescrp').addClass('col-xs-4');
}

function onExtraSmallDevices() {
    $('.resources, .follow, .briefDescrp').removeClass('col-xs-4');
    $('.resources, .follow').addClass('col-xs-5');
    $('.briefDescrp').addClass('col-xs-offset-1 col-xs-11');
}

在bootstrap网格系统中，如何将列转换为某个视口上的行

3 个答案: