Как сделать ширину столбца начальной загрузки 4 кнопками отзывчивыми? - PullRequest
Новая
       17

Как сделать ширину столбца начальной загрузки 4 кнопками отзывчивыми?

0 голосов
/ 17 мая 2018

Я пытаюсь создать вертикальный столбец кнопок. Я сделал так, чтобы он выглядел так, как мне хотелось бы - но когда на экране ничего, кроме lg, кнопки не реагируют. Я бы хотел, чтобы они автоматически сжимались до элемента, в котором они содержатся. Я посмотрел здесь: Как заставить кнопку растягиваться по ширине столбца и здесь: Как заставить кнопки реагировать на загрузку? И ни один не помог. Я также попытался добавить размер столбца в div - без кубиков.

Мой код-

CSS: 

    body {
        height: 100%;
        width: 100%;
    }
    #button-container {
        height: 75vh;
        width: 10%;
        margin: 5% 2.5% 0 5%;
        background-color: aquamarine;
    }
    #button-group {
        height: 100%;
        width: 100%;
    }
    button {
        height: inherit;
        max-width: 100%;
        word-wrap: break-word;
        display: block;
    }

HTML: 

<div id="button-container" class="container">
<div id="button-group" class="btn-group btn-group-vertical btn-group-lg" 
role="group">
    <button id="about" type="button" class="btn">About</button>
    <button id="resume" type="button" class="btn">Resume</button>
    <button id="works" type="button" class="btn">Works</button>
    <button id="contact" type="button" class="btn">Contact</button>
</div>
</div>

Ссылка JsFiddle: https://jsfiddle.net/TravellingPumpkin/hs227bup/6/

1 Ответ

0 голосов
/ 18 мая 2018

Поскольку вы используете Bootstrap, почему бы не использовать Grid System в качестве адаптивного размера?Они встроены и не требуют никаких пользовательских CSS, только некоторые классы.Вы можете выбрать разные размеры сетки для разных размеров экрана, и все прекрасно сочетается.Система сетки разбита на 12

. Например, вы можете удалить width CSS и заменить его несколькими классами сетки.

<div id="button-container" class="container">
  <div class="row">
    <div class="col-sm-6 col-lg-4 col-xl-3">
      <div id="button-group" class="btn-group btn-group-vertical btn-group-lg" role="group">
        <button id="about" type="button" class="btn">About</button>
        <button id="resume" type="button" class="btn">Resume</button>
        <button id="works" type="button" class="btn">Works</button>
        <button id="contact" type="button" class="btn">Contact</button>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/hs227bup/7/

В приведенном выше примере, что, вероятно, не совсем так, как вы хотели бы, но это отправная точка, я добавил <div> скласс row вокруг вашей группы, затем добавлен еще один div с классами сетки в.

col-sm-6 означает, что он будет иметь ширину 50% в «маленькой» точке останова.

col-lg-4 означает, что у него будет ширина 33% (4/12) в «большой» точке останова.

col-xl-3 означает, что у него будет ширина 25% (3/12) в«очень большая» точка останова.

Экспериментируя с этими значениями, я представляю, что вы можете отсортировать их так, как хотите.

...