[Bootstrap] SearchBar components 배치 방법

[그림 1] SearchBar components 배치 결과

 

SearchBar components 배치 방법

SearchBar의 components의 배치를 flex를 이용해 할 수 있었는데 부트스트랩으로 [그림 1]과 같이 보기 좋게 만들 수도 있었다. 해당 코드는 아래와 같다.

<div class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <div class="row g-3 align-items-center">
      <div class="col-auto">조회기간</div>
      <div class="col-auto">
        <date-picker v-model:value="time3" range></date-picker>
      </div>
      <div class="col-auto">간격</div>
      <div class="col-auto">
        <select class="form-select me-2">
          <option selected>일간별 조회</option>
          <option value="1">주간별 조회</option>
          <option value="2">월간별 조회</option>
          <option value="3">연도별 조회</option>
        </select>
      </div>
      <div class="col-auto">
        <button class="btn btn-secondary my-sm-0" type="submit">
          <i class="bi bi-search"></i>
          검색
        </button>
      </div>
    </div>
    <div class="row g-1 align-items-center">
      <div class="col-auto">
        <button class="btn btn-secondary me-2 my-sm-0" type="submit">
          <i class="bi bi-filetype-pdf"></i>
          PDF
        </button>
      </div>
      <div class="col-auto">
        <button class="btn btn-secondary me-2 my-sm-0" type="submit">
          <i class="bi bi-filetype-xlsx"></i>
          XLSX
        </button>
      </div>
      <div class="col-auto">
        <button class="btn btn-secondary me-2 my-sm-0" type="submit">
          <i class="bi bi-printer"></i>
          인쇄
        </button>
      </div>
      <div class="col-auto">
        <button class="btn btn-secondary my-sm-0" type="submit">
          <i class="bi bi-arrow-clockwise"></i>
          초기화
        </button>
      </div>
    </div>
  </div>
</div>

 

참고한 내용

https://getbootstrap.com/docs/5.0/forms/overview/#form-text

Forms