删除第一列，最后一列之前和列之间的Bootstrap空间

Question

I have the following code done here " https://liveweave.com/uRJjZM#&togetherjs=dLyJTGm2R4 "

I'm trying to remove the space between the columns, before the first column and after the last column, basically stacking everything side by side without spaces anywhere. I've tried using no-gutter as found in previous stack overflow answers to similar questions. However, I'm not able to get it to work. How do I remove the spaces?

    <style>

        @import url(https://fonts.googleapis.com/css?family=Roboto:300);

      .ui-effects-transfer
      {
        border: 2px
        dotted gray;
      }

      .login-page
      {
        width: 360px;
        padding: 8% 0 0;
        margin: auto;
      }

      .form
      {
        position: relative;
        z-index: 1;
        background: #FFFFFF;
        max-width: 360px;
        margin: 0 auto 100px;
        padding: 45px;
        text-align: center;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
      }

      .form input
      {
        font-family: "Roboto", sans-serif;
        outline: 0;
        background: #f2f2f2;
        width: 100%;
        border: 0;
        margin: 0 0 15px;
        padding: 15px;
        box-sizing: border-box;
        font-size: 14px;
      }

      .form button
      {
        font-family: "Roboto", sans-serif;
        text-transform: uppercase;
        outline: 0;
        background: #4778b7;
        width: 100%;
        border: 0;
        padding: 15px;
        color: #FFFFFF;
        font-size: 14px;
        -webkit-transition: all 0.3 ease;
        transition: all 0.3 ease;
        cursor: pointer;
      }

      .form button:hover,.form button:active,.form button:focus
      {
        background: #4778b7;
      }

      .form .message
      {
        margin: 15px 0 0;
        color: #b3b3b3;
        font-size: 12px;
      }

      .form .message a
      {
        color: #4CAF50;
        text-decoration: none;
      }

      .form .register-form
      {
        display: none;
      }

      .container
      {
        position: relative;
        z-index: 1;
        max-width: 300px;
        margin: 0 auto;
      }

      .container:before, .container:after
      {
        content: "";
        display: block;
        clear: both;
      }

      .container .info
      {
        margin: 50px auto;
        text-align: center;
      }

      .container .info h1
      {
        margin: 0 0 15px;
        padding: 0;
        font-size: 36px;
        font-weight: 300;
        color: #1a1a1a;
      }

      .container .info span
      {
        color: #4d4d4d;
        font-size: 12px;
      }

      .container .info span a
      {
        color: #000000;
        text-decoration: none;
      }

      .container .info span .fa
      {
        color: #EF3B3A;
      }

      body
      {
        background: #4778b7; /* fallback for old browsers */
        background: -webkit-linear-gradient(right, #4778b7, #4778b7);
        background: -moz-linear-gradient(right, #4778b7, #4778b7);
        background: -o-linear-gradient(right, #4778b7, #4778b7);
        background: linear-gradient(to left, #4778b7, #4778b7);
        font-family: "Roboto", sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      .row.no-gutter {
      margin-left: 0;
      margin-right: 0;
    }

    .row.no-gutter [class*='col-']:not(:first-child),
    .row.no-gutter [class*='col-']:not(:last-child) {
      padding-right: 0;
      padding-left: 0;
    }

      </style>


      <div id="grid" class="container-fluid">
            <div class="row no-gutter">
                <div class="col-md-2">
                    <ul id="column_1">
                        <div class="list-group"></div>
                    </ul>
                </div>
                <div class="col-md-2 ">

                    <ul id="column_2">
                        <div class="list-group"></div>
                    </ul>
                </div>
                <div class="col-md-2 ">
                    <ul id="column_3">
                        <div class="list-group"></div>
                    </ul>
                </div>
                <div class="col-md-2 ">

                    <ul id="column_4">
                        <div class="list-group"></div>
                    </ul>
                </div>
                <div class="col-md-2">

                    <ul id="column_5">
                        <div class="list-group"></div>
                    </ul>
                </div>
            </div>
        </div>

<script>
  document.getElementById("column_1").innerHTML = "";
            document.getElementById("column_1").innerHTML="<span style='color:#FFFFFF'> Account Group </span>";

            for (prop = 0; prop < 10; prop++)

            {

                document.getElementById('column_1').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop + ' class="list-group-item" onclick="myFunction2(this.id)">' + prop + '</button></div>';
            }

            function myFunction2(e)
            {

                test = e;
                console.log(e);
                document.getElementById("column_2").innerHTML = "";
                document.getElementById("column_2").innerHTML="<span style='color:#FFFFFF'> GL Accounts </span>";
                document.getElementById("column_3").innerHTML = "";
                document.getElementById("column_3").innerHTML="<span style='color:#FFFFFF'> GL Balance </span>";
                document.getElementById("column_4").innerHTML = "";
                document.getElementById("column_4").innerHTML="<span style='color:#FFFFFF'> GL Name </span>";
                document.getElementById("column_5").innerHTML = "";


                for (prop3 = 0; prop3 < 20; prop3++)
                {
                  document.getElementById('column_2').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + '  class="list-group-item" onclick="myFunction4(this.id)">' +  e + '</button></div>';
                  document.getElementById('column_3').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + '  class="list-group-item" onclick="myFunction4(this.id)">' +  e + '</button></div>';
                  document.getElementById('column_4').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + '  class="list-group-item" onclick="myFunction4(this.id)">' +  e + '</button></div>';



                }
            }

            function myFunction4(e)
            {
                test = e;
                console.log(e);
                document.getElementById("column_5").innerHTML = "";
                document.getElementById("column_5").innerHTML="<span style='color:#FFFFFF'> Breakdown </span>";
                for (prop5 = 0; prop5 < 5; prop5++)
                {
                    document.getElementById('column_5').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop5 + '  class="list-group-item" onclick="myFunction5(this.id)">' +  "Breakdown " + prop5 + '</button></div>';
                }
            }

            function myFunction5(e)
            {
                test = e;
                console.log(e);
                window.open("", "", "width=500,height=500");
            }


        </script>

Answer 1

You have syntax error there. According to w3c , ul should have only <li> elements as it's children.

Try to change ul's to div's like here: <ul id="column_1"> to <div id="column_1"> , etc.