Блог

Главная - Вопросы по программированию - Создание блока кнопок на маленьком устройстве

Создание блока кнопок на маленьком устройстве

#html #css #twitter-bootstrap #bootstrap-5

#HTML #css #twitter-bootstrap #bootstrap-5

Вопрос:

Мне нужно, чтобы моя кнопка занимала всю ширину, когда вид маленький, например, для просмотра на мобильном телефоне. Это то, что у меня есть до сих пор…

Большое устройство
введите описание изображения здесь

Среднее устройство
введите описание изображения здесь

Маленькое устройство

введите описание изображения здесь

На средних и малых устройствах мне нужно, чтобы кнопка занимала весь блок. Я пока не использую какой-либо пользовательский css. Я просто использую bootstrap по умолчанию. Пожалуйста, посмотрите мой код ниже:

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<header class="p-3 bg-dark text-white">
  <div class="container">
    <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
      <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
        <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
      </a>

      <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
        <li><a href="#" class="nav-link px-2 text-secondary">Home</a></li>
        <li><a href="#" class="nav-link px-2 text-white">Features</a></li>
        <li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
        <li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
        <li><a href="#" class="nav-link px-2 text-white">About</a></li>
      </ul>

      <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" style="display:flex; align-items:inherit;">
        <input type="text" class="form-control form-control-dark" placeholder="Username" aria-label="Username">
        <input type="password" class="form-control form-control-dark" placeholder="Pasword" aria-label="Password">
        <button type="submit" class="form-control btn btn-outline-light" style="margin-left: 1rem!important;">Login</button>
      </form>



      <div class="d-grid gap-2 d-md-flex justify-content-md-end">
        <button class="btn btn-primary me-md-2" type="button">Button</button>
        <button class="btn btn-primary" type="button">Button</button>
      </div>

      @*
      <div class="text-end d-sm-block gap-2">
        <button type="button" class="btn btn-warning" style="width:100%; display:block;">
                            Sign-up
                        </button>
      </div>*@
    </div>
  </div>
</header>

Ответ №1:

Попробуйте это…. Единственное изменение — добавление d-grid gap-2 в Div, в котором находится ваша кнопка. Возможно, вам придется отредактировать номер 2 , чтобы получить полностью желаемый эффект. С помощью этого вы, вероятно, тоже сможете удалить кнопку style= «С вашей кнопки».

 
<div class="text-end d-grid gap-2">
   <button type="button" class="btn btn-warning" style="width:100%; display:     
   block;">Sign-up</button>
</div>

Комментарии:

1. Нет, сэр. Это не отражается, даже если я вставляю пробел-4.

2. Извините за это @Ibanez1408 — Вместо d-grid , попробуйте .d-md-block (естественно, это изменит ширину кнопки в точке останова MD, что d-sm-block может быть лучше для вас). Дело в том, что вы можете создавать разные значения ширины в разных точках останова. Вот документы (немного вниз по странице) getbootstrap.com/docs/5.0/components/buttons

3. На странице начальной загрузки я действительно вижу, как она расширяется, как только достигает определенной точки. Но в моем случае это не я использовал это событие. <div class="d-grid gap-2 d-md-flex justify-content-md-end"> <button class="btn btn-primary me-md-2" type="button">Button</button> <button class="btn btn-primary" type="button">Button</button> </div>

4. Я отредактировал свой вопрос, чтобы отразить весь html.

5. Хорошо, в Div, в котором находится кнопка (а не сама кнопка) Попробуйте ‘d-flex` самостоятельно 🙂

Метки: ,