Question

我在项目的“爱好和兴趣”部分遇到了很多麻烦。请参见屏幕截图：。具体来说，无序列表具有字体真棒图标作为项目符号。我希望它在两列中，但要有响应，因为列之间的间隙将会调整，并且图标和文本不会像当前那样转移到新行

                 <section id= "skills">


                <h3 class="text-center pt-3 pb-3"><strong> Ready to tackle any challenge. Proven by performance.</strong></h3>
                <div class="container containerPadding">
                    <div class="row">
                        <div class="col-sm-4 ">

                            <!--- Instruments -->

</div>
                        <div class="col-sm-6 offset-sm-2 ">




                            <div class="container float-center">
                                    <h1 class="text-center pt-5 ez-animate" data-animation="bounce"><strong>Hobbies and Interests</strong></h1>
                                <div class="row">
                                    <div class="col" style="column-count: 2; column-gap: 15em;">
                                        <ul class="barbie list-unstyled">
                                            <li class= "barbieitem pb-2 pt-2 puzzle text-left ">Puzzles</li>
                                            <li class= "barbieitem pb-2 pr-4 plane text-left">Travel</li>
                                            <li class= "barbieitem pb-2 wrench text-left">Handy Work</li>
                                            <li class= "barbieitem pb-2 plane text-left">Travel</li>
                                            <li class= "barbieitem pb-2 volunteer text-left">Volunteering</li>
                                            <li class= "barbieitem pb-2 car text-left">Automobiles</li>
                                            <li class= "barbieitem pb-2 plane text-left">Travel</li>
                                            <li class= "barbieitem pb-2 camera text-left">Photography</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                                </div>
                            </div>
                        </div>
            </section>

CSS：

     dt {font-size: 1.3em;position:relative;}
     dt:not(:first-of-type) {margin-top: 2em}

     dt:before {
        content: ""; 
        font-family: FontAwesome;
        left: -40px;
      // position:absolute;
        top: 5px;
        display: inline-block;
        margin-right: 8px;







    }

    dt.achievement:before {
        content: "\f091"; 

        //These two nested lines control the FA Icon animation! because of the fact i am using a ::before element, I cannot use the native fa spinning classes explicitly in the html
        -webkit-animation: fa-spin 2s infinite linear;
        animation: fa-spin 2s infinite linear;
    }

      dt.academic:before {
        content: "\f19d"; 
    }


    dd {margin-left: 0}
    dd.description {font-size: 1.2rem;}
    dd.subdescription {
      font-size: 1rem;
      font-weight: 700;
    }

         li.puzzle::before {
      font-family: "FontAwesome";
      font-size: 1.1em;
      content: "\f12e";
      margin-right: 8px;
      display: inline-block;
      -webkit-animation: fa-spin 2s infinite linear;
      animation: fa-spin 2s infinite linear;
    }
    li.wrench::before {
      font-family: "FontAwesome";
      font-size: 1.1em;
      content: "\f0ad";
      margin-right: 8px;
      display: inline-block;
      -webkit-animation: fa-spin 2s infinite linear;
      animation: fa-spin 2s infinite linear;
    }
    li.plane::before {
      font-family: "FontAwesome";
      font-size: 1.1em;
      content: "\f072";
      margin-right: 8px;
      display: inline-block;
      -webkit-animation: fa-spin 2s infinite linear;
      animation: fa-spin 2s infinite linear;
    }
    li.car::before {
      font-family: "FontAwesome";
      font-size: 1.1em;
      content: "\f1b9";
      margin-right: 8px;
      display: inline-block;
      -webkit-animation: fa-spin 2s infinite linear;
      animation: fa-spin 2s infinite linear;
    }
    li.volunteer::before {
      font-family: "FontAwesome";
      font-size: 1.1em;
      content: "\f0c0";
      margin-right: 8px;
      display: inline-block;
      -webkit-animation: fa-spin 2s infinite linear;
      animation: fa-spin 2s infinite linear;
    }
    li.camera::before {
      font-family: "FontAwesome";
      font-size: 1em;
      content: "\f030";
      margin-right: 8px;
      display: inline-block;
      -webkit-animation: fa-spin 2s infinite linear;
      animation: fa-spin 2s infinite linear;
    }

    @keyframes fa-spin {
      0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
      }

      100% {
          -webkit-transform: rotate(359deg);
          transform: rotate(359deg);
      }
    }


    .shift{
        margin-left:20px;
    }

    .barbie{
      list-style: none;
        margin: 0;
        padding: 0;
        color: rgba(59,66,76,1);
    }

    .barbieitem{
      //text-align: right;
      font-size: 1.2em;
    }

 .jarallaxTextResize{
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .jarallaxTextResize{

    //font-size: 4rem;
    font-size: 2.8rem;
}

}

.jarallax {
        position: relative;
        z-index: 0;
      }
    .jarallax > .jarallax-img {
        position: absolute;
        object-fit: cover;
        /* support for plugin https://github.com/bfred-it/object-fit-images */
        font-family: 'object-fit: cover;';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
    /* Help from: https://free.nkdev.info/jarallax/*/
    .overlay {
      display: table;
      width: 100%;
      height: 75vh;
      background-color: rgba(190, 190, 190, 0.6);
    }
    @media only screen and (max-height: 740px) {
      .overlay {
          height: 100vh;
      }
    }
    .overlay-cell {
      position: absolute;
      left: 0;
      //top: 35%;
      top: 34%;
      width: 100%;
      text-align: center;
    }

    /*.heroSection {
      height: 100vh; //Controls the height of the Hero
    }
    */

    .subSection {
      height: 300px; //Controls the height of the subsection jarallax
      //margin: 0;
    }

    .overlay-cell.header {
      top: 115px;
  }

Answer 1

文本/图标正在换行，因为您有15个当前字体字符的固定宽度。由于您设置了列间距规则，div的其余部分需要围绕此进行回流。尝试调整或消除列间隙，你可能会更接近你想要的结果。

如何在Bootstrap 4中创建一个响应式双列<ul>，其中FA图标为子弹？

1 个答案: