Как выровнять четное количество элементов по горизонтали с интервалом между элементами с помощью Bootstrap?

Question

У меня проблема с динамическим выравниванием некоторых элементов с помощью Bootstrap, когда есть четное количество элементов.

У меня есть 4 HTML select элементов рядом друг с другом, и я хочу иметь промежуток между ними. Поэтому я установил каждый элемент select в col-md-3 div. Для этого я использовал ширину 80% для каждого из них. Внизу у меня есть table, который я хочу иметь размер 100%. Я разместил все предметы в контейнере row. Я хочу, чтобы селектора выровнялись со следующей таблицей, которую я не могу сделать.

<div class="container"> 
<div class="row"> 
    <h1>Title</h1> 
    <div class="col-md-3 col-xs-3" style="padding-left: 0; padding-right: 0;"> 
     <label>Test1</label> 
     <select style="width: 80%"> 
      <option selected="selected" value="1">Test1</option> 
     </select> 
    </div> 
    <div class="col-md-3 col-xs-3" style="padding-left: 0; padding-right: 0;"> 
     <label>Test2</label> 
     <select style="width: 80%"> 
      <option selected="selected" value="1">Test2</option> 
     </select> 
    </div> 
    <div class="col-md-3 col-xs-3" style="padding-left: 0; padding-right: 0;"> 
     <label>Test3</label> 
     <select style="width: 80%"> 
      <option selected="selected" value="1">Test3</option> 
     </select> 
    </div> 
    <div class="col-md-3 col-xs-3" style="padding-left: 0; padding-right: 0;"> 
     <label>Test4</label> 
     <select style="width: 80%"> 
      <option selected="selected" value="1">Test4</option> 
     </select> 
    </div> 

    <p> 
     Some description 
    </p> 

    <table class="text-center"> 
     <thead> 
      <tr> 
       <th>1</th> 
       <th>2</th> 
       <th>3</th> 
       <th>4</th> 
       <th>5</th> 
      </tr> 
     </thead> 
    </table> 
</div> 
</div> 

Проблема заключается в том, что, поскольку я использую 80% ширины на селекторов последний селектор, то есть «test5» не совпадает с конечной границы таблицы. Я думаю, что проблема очевидна, если посмотреть на следующие JSFiddle.

Как можно динамически выровнять элементы с помощью Bootstrap и иметь промежутки между элементами? Я приложил изображение ниже с желаемым дизайном, как я хочу, чтобы он выглядел.

Answer 1

Является ли это то, что ищете? https://jsfiddle.net/fjavmgrf/1/

Если вы убираете прокладку, я лично считаю, что она выглядит лучше, но у вас есть этот вариант, открытый для вас.

select{ 
    width:100%; 
} 

.paddingZero{ 
    padding:0; 
} 

Или это: https://jsfiddle.net/37z2dqqk/1

EDIT (После того, как изображение было выставлено:.

Что вы хотите на самом деле не возможно с начальной загрузки Да вы могли бы баловаться с прокладкой и, возможно, маржи и взломать его, но я лично не поклонник этого. Если вы все еще хотите сделать это таким образом, тогда в основном просто отрегулируйте отступы до тех пор, пока он не будет работать, и сохраните выбор на 100%. Извините, я не могу быть моя помощь, но мой честный совет состоял бы в том, чтобы пойти с одним из предложений в моих ответах или ответами в комментарии выше.