如何获得响应式Bootstrap联系表

Question

我对我的自举联系表格感到非常满意，但是当我将其最小化到细胞水平时它会消失，我必须一直向右滚动。任何人都可以帮助我使用我的CSS来完美地调整它的大小吗？

此外，有没有办法让切换按钮在可见时居中而不是向左浮动。

HTML：

optproc example {abc def} {
    puts "abc=$abc, def=$def"
}

Answer 1

也许您可以使用引导行和列参数，而不是使用单独的li标记。尝试这样的事情：

<!--Social Media Icons-->
<li class="nav-item">
  <div class="row">
    <div class="col-xs-2">
      <a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
    </div>
    <div class="col-xs-2">
      <a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
    </div>
    <div class="col-xs-2">
      <a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
    </div>
    <div class="col-xs-2">
      <a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
    </div>
    <div class="col-xs-2">
      <a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
    </div>
    <div class="col-xs-2">
      <a class="nav-link" title="Email"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
    </div>
  </div>
</li>

Answer 2

我找到了答案：

要使联系表单有效，我删除了CSS中的.row。一旦我这样做，它就像一个响应的形式。

要将切换按钮设为中心，我只需添加＆＃34; text-center＆＃34;崩溃的财产。见下文。

 <div class="collapse navbar-collapse text-center" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <li class="nav-item">
              <a class="nav-link"
              href="about.html">About</a>
            </li>