Сокращение разрыва между колонками с помощью начальной загрузки - PullRequest
Новая
       16

Сокращение разрыва между колонками с помощью начальной загрузки

0 голосов
/ 18 октября 2018

Я не могу закрыть разрыв между элементами таблицы в начальной загрузке.Это дает мне странный разрыв в 60%, который я не могу исправить.Я считаю, что это связано с сеточной системой, которую я пытаюсь реализовать.Я пробовал встроенное моделирование, но не могу заставить его сократить разрыв.Кто-нибудь может предложить быстрое решение?

Приветствия 

<div class="container">
   <table class="table table-striped">
      <tbody>
         <tr>
            <td colspan="1" >
               <form class="well form-horizontal">
                  <fieldset>
                     <div class="form-group">
                        <label class="col-md-4 control-label" style="width: 100%;">Which ArtSound Partner are you?</label>
                        <div class="col-md-6 inputGroupContainer">
                           <div class="input-group">
                              <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
                              <select class="selectpicker form-control">
                                 <option>ANU School of Music</option>
                                 <option>Arts Society of Canberra</option>
                                 <option>Australian Festival of Chamber Music</option>
                                 <option>ANU School of Music</option>
                                 <option>ANU School of Music</option>
                                 <option>ANU School of Music</option>
                                 <option>ANU School of Music</option>
                              </select>
                           </div>
                        </div>
                        </div>
                     </div>
                     <div class="form-group">
                        <label class="col-md-4 control-label">Not an ArtSound partner?</label>
                        <div class="col-md-6 inputGroupContainer">
                           <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="eventname" name="eventname" placeholder="Event name
                          " class="form-control" required="true" value="" type="text">

                        </div>

                        <input type="checkbox" name="check" checked> <span class="label-text">Optional: Please send me information about becoming an arts partner</span>
                        </div>
                     </div>
                     <div class="form-group">
                        <label class="col-md-4 control-label">Name of your event</label>
                        <div class="col-md-6 inputGroupContainer">
                           <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="eventname1" name="eventname1" placeholder="Address Line 2" class="form-control" required="true" value="" type="text"></div>
                        </div>
                     </div>




                     <div class="form-group">
                        <label class="col-md-4 control-label">Please describe your event</label>
                        <div class="col-md-6 inputGroupContainer">
                           <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><textarea id="city" name="city" placeholder="Please describe your event" class="form-control" required="true" value="" type="text" rows="5" onkeyup="countChar(this)"></textarea></div>
                           <span style="font-size: 12px;">Characters left: <span id="charNum">250</span></span>
                        </div>
                     </div>




              <div class="form-group">
                        <label class="col-md-4 control-label">Pick a date or type one in</label>
                        <div class="col-md-6 inputGroupContainer">
                           <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>



                            <input id="postcode" name="daterange" placeholder="Pick a date" class="form-control" required="true" value="" type="text">

                            <script>
          $(function() {
            $('input[name="daterange"]').daterangepicker({
             opens: 'left'
           }, function(start, end, label) {
            -console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
             });
                  });
            </script>



                           </div>
                        </div>
                     </div>






                     <div class="form-group">
                        <label class="col-md-4 control-label">Pick a time</label>
                        <div class="col-md-6 inputGroupContainer">
                           <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="postcode" name="postcode" placeholder="00:00" class="form-control" required="true" value="" type="text"></div>
                        </div>
                     </div>



                  </fieldset>
               </form>
            </td>
            <td colspan="1">
               <form class="well form-horizontal">
                  <fieldset>

                    <div class="form-group">
                        <label class="col-md-12 control-label">Please enter your event's address</label>
                        <div class="col-md-12 inputGroupContainer">
                           <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><textarea id="city" name="city" placeholder="Please describe your event" class="form-control" required="true" value="" type="text" rows="5" onkeyup="countChar(this)"></textarea></div>
                           <span style="font-size: 12px;">Characters left: <span id="charNum">250</span></span>
                        </div>
                     </div>






                     <div class="form-group">
                        <label class="col-md-4 control-label">Web address</label>
                        <div class="col-md-6 inputGroupContainer">
                           <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input id="fullName" name="fullName" placeholder="http://" class="form-control" required="true" value="" type="text"></div>
                        </div>
                     </div>
                     <div class="form-group">
                        <label class="col-md-4 control-label">Email</label>
                        <div class="col-md-6 inputGroupContainer">
                           <div class="input-group"><span class="input-group-addon" style="max-width: 100%;"><i class="glyphicon glyphicon-home"></i></span><input id="addressLine1" name="addressLine1" placeholder="johnsmith@gmail.com" class="form-control" required="true" value="" type="text"></div>
                        </div>
                     </div>




                     </div>

                  </fieldset>
               </form>
            </td>
         </tr>
      </tbody>
   </table>
</div>

1 Ответ

0 голосов
/ 18 октября 2018

Я не уверен в вашей проблеме, но, увидев в своем коде, вы можете попробовать:

  1. использовать класс row в качестве родителя для каждого элемента col-*-*, такого как form-groupclass в вашем случае.
  2. вы также можете добавить no-gutters к классу row, чтобы удалить заполнение каждого col-*-* класса
  3. add table-sm, чтобы минимизировать заполнениестрок в вашей таблице.
...