0

Не могу понять как реализовать следующее поведение верстки.

  1. Необходимо чтобы все элементы были одинаковой МИНИМАЛЬНОЙ ширины.
  2. Необходимо чтобы элементы стояли ровно один над другим без смещений.
  3. Оба первых правила должны работать в респонсивной версии.

Немогу так же понять почему в примере кода не работают span6, кто знает почему, прошу отредактировать пример.

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

@import url('https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span6">
      <div class="" data-toggle="buttons-radio">
        <button class="btn btn-mini btn-primary" value="all">
          Все</button>
        <button class="btn btn-mini btn-primary" value="dogs">
          Собака</button>
        <button class="btn btn-mini btn-primary" value="cats">
          Кошка</button>
        <button class="btn btn-mini btn-primary" value="other">
          Другие</button>
        <button class="btn btn-mini btn-primary" value="goods">
          Товары</button>
        <button class="btn btn-mini btn-primary" value="services">
          Услуги</button>
      </div>
    </div>
    <div class="span6">контент</div>
  </div>
</div>

3
  • для пункта #1 можно использовать класс .btn-block
    – Ruslan_K
    18 окт 2016 в 13:41
  • @Ruslan_K Наверное не совсем я правильно тогда выразился, Необходимо чтобы все элементы были одинаковой МИНИМАЛЬНОЙ ширины 18 окт 2016 в 13:45
  • ужас, кто еще юзает версию 2. ? Уже 4-ая вышла!
    – SVE
    18 окт 2016 в 16:50

1 ответ 1

1

задайте min-width: ... px;

.btn-primary {
  min-width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span6">
      <div class="" data-toggle="buttons-radio">
        <button class="btn btn-mini btn-primary" value="all">
          Все</button>
        <button class="btn btn-mini btn-primary" value="dogs">
          Собака</button>
        <button class="btn btn-mini btn-primary" value="cats">
          Кошка</button>
        <button class="btn btn-mini btn-primary" value="other">
          Другие</button>
        <button class="btn btn-mini btn-primary" value="goods">
          Товары</button>
        <button class="btn btn-mini btn-primary" value="services">
          Услуги</button>
      </div>
    </div>
    <div class="span6">контент</div>
  </div>
</div>

2
  • Это решение не попадает под условие №3 18 окт 2016 в 17:28
  • Хотя если выставить выравнивание по ширине, то уже начинает выглядеть хоть как то юзабельно. 18 окт 2016 в 17:38

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.