Блог

Главная - Вопросы по программированию - Как исправить положение элемента опции BS5

Как исправить положение элемента опции BS5

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Как я могу исправить положение элемента опции?

Как вы видите, когда вы открываете элемент выбора, параметры находятся не прямо под элементом выбора, они немного слева, как я могу это исправить?

Я использую Bootstrap 5

 select{
  border-radius: 0 !important;
}

select:focus{
  box-shadow: none !important;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>


  <div class="container">
        <div class="row">
<div class="col-md-3">
    <label for="edit_status">Status</label>
<select id="edit_status" class="form-select" name="edit_status">
  <option value="0">Active</option>
  <option value="1">Disable</option>
  <option value="2">None</option>
</select>
</div>
</div>
  </div>

Ответ №1:

Я предполагаю, что вы имеете в виду, что вы хотите Status , чтобы метка находилась непосредственно под выделенным текстом и его параметрами.

.form-select Класс добавляет .75rem дополнение слева к select элементу.

Вы также можете добавить это отступное левое значение к метке.

 label#edit-status-label {
padding-left: 0.75rem;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
  crossorigin="anonymous"
/>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
  crossorigin="anonymous"
></script>

<div class="container">
  <div class="row">
<div class="col-md-3">
  <label id="edit-status-label" for="edit_status">Status</label>
  <select id="edit_status" class="form-select" name="edit_status">
    <option value="0">Status</option>
    <option value="1">Disable</option>
    <option value="2">None</option>
  </select>
</div>
  </div>
</div>