使用select 2时引导问题

Question

我正在使用select2进行预先输入。功能正常但它会扭曲我的输入字段。

例如此代码

  <div class="container">
    <div class="card">
      <div class="card-header">Search for a Property</div>
      <div class="card-body">
        <div class="row">
          <!-- County Column -->
          <div class="col-md-3">
            <select class ="form-control" id="county" name="county">
              <!--Gets all counties from DB -->
              <option> - Select a County - </option>
              @foreach ($county as $counties)
                <option>{{$counties->name}}</option>
              @endforeach
            </select>
          </div>
          <div class="col-md-3">
            <select class="town form-control" name="town">
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript">

  $('.town').select2({
    placeholder: 'Select an item',
    ajax: {
      url: '/townsearch',
      dataType: 'json',
      delay: 250,
      processResults: function (data) {
        return {
          results:  $.map(data, function (item) {
                return {
                    text: item.name,
                    id: item.name
                }})};},
      cache: true
    }});
</script>

将产生以下

Image of two dropdowns.

下拉1是我想要的方式。下拉2是select2的效果。任何修复？