От новичка до гуру: Курсы программирования на CyberDuff

работа с сеткой в ​​Bootstrap

Я относительно новичок в веб-разработке в целом, и у меня кризис компоновки: у меня есть container-fluid, в котором row разделен на два *col-md-6* с. В col-md-6 я хочу иметь возможность располагать элементы горизонтально. Как показано в моем коде/изображении; Я пытаюсь сделать простой div, который составляет 95% высоты button-group и отображается рядом с ним... однако он отображается под ним и очень короткий (я хочу, чтобы он быть такой же высоты, как группа кнопок). Каков протокол для определения размера/расположения элементов рядом друг с другом в Bootstrap?

    <div class="container-fluid">
<div class="row">

        <div class="col-md-6" style="background-color: lightcyan">
            <div class="btn-group-vertical btn-group-lg">
                <button type="button" class="btn btn-primary">Quick Select</button>
                <button type="button" class="btn btn-primary">Show in Depth</button>
                <button type="button" class="btn btn-primary">Delete Product</button>
            </div>
            <div id="prod_view">
                yo
                </div>

CSS:

    #prod_view{
background: lightcoral;
width: 69%;
height: 95%;
margin-left: 23%;
border: solid;
    }

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

Я хочу, чтобы поле «йо» было более прямоугольным и располагалось справа от группы кнопок.

html css twitter-bootstrap styling
28.03.2017

  • Вы всегда можете поместить еще одну строку в этот столбец и разбить ее на два div col-md-6, но вы также можете использовать там flexbox, если вам не нужна поддержка IE10 или ниже. css-tricks.com/snippets/css/a-guide-to -флексбокс 28.03.2017
  • Вы используете Bootstrap 3? 28.03.2017

Ответы:


1

Вот гибкий макет, который сделает это. Вы можете использовать свойство justify-content, чтобы повлиять на выравнивание по горизонтали, а align-items повлияет на выравнивание по вертикали. Вот визуальное руководство для flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.custom-row {
  display: flex;
  justify-content: space-between;
}
.custom-row > div:last-child {
  width: 69%;
}
#prod_view {
  height: 95%;
  background: lightcoral;
  border: solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">

    <div class="col-md-6 custom-row" style="background-color: lightcyan">
      <div class="btn-group-vertical btn-group-lg">
        <button type="button" class="btn btn-primary">Quick Select</button>
        <button type="button" class="btn btn-primary">Show in Depth</button>
        <button type="button" class="btn btn-primary">Delete Product</button>
      </div>
      <div>
        <div id="prod_view">
          yo
        </div>
      </div>
    </div>
  </div>
</div>

28.03.2017
  • Спасибо! Почему вам нужно поместить prod_view в другой div? 28.03.2017
  • @MikeHawk НП. По умолчанию гибкий дочерний элемент гибкого родителя будет иметь высоту 100%. Проще оставить это поведение в покое и просто изменить дочерние элементы гибкого дочернего элемента, если вы хотите изменить высоту. 28.03.2017
  • спасибо и еще одна вещь, как вы избавляетесь от этого пространства между группой кнопок и flexparent? 29.03.2017
  • @MikeHawk, как упоминалось в моем комментарии с ответом, свойство justify-content влияет на горизонтальное выравнивание / интервал. Вы можете увидеть визуальное руководство для различных значений, которые вы можете использовать там. 29.03.2017
  • @MikeHawk, если вы хотите, чтобы они были рядом, просто полностью удалите это свойство. 29.03.2017
  • ммкай 29.03.2017

    • 2

    Другой способ — использовать один класс flexbox. Добавьте его в row и col-md-6:

    .flex {
    display: flex;
}

<div class="container-fluid">
    <div class="row flex">
        <div class="col-md-6 flex" style="background-color: lightcyan">
            <div class="btn-group-vertical btn-group-lg">
                <button type="button" class="btn btn-primary">Quick Select</button>
                <button type="button" class="btn btn-primary">Show in Depth</button>
                <button type="button" class="btn btn-primary">Delete Product</button>
            </div>
            <div id="prod_view">
                yo
            </div>
        </div>
    </div>
</div>

    http://www.codeply.com/go/wvCRJ0ufEB

    В Bootstrap 4 по умолчанию используется flexbox, поэтому дополнительный класс не нужен.

    28.03.2017
    Новые материалы
    Основы Spring: Bean-компоненты, контейнер и внедрение зависимостей
    Как лего может помочь нашему пониманию Когда мы начинаем использовать Spring, нам бросают много терминов, и может быть трудно понять, что они все означают. Итак, мы разберем основы и будем..
    Отслеживание состояния с течением времени с дифференцированием снимков
    Время от времени что-то происходит и революционизирует часть моего рабочего процесса разработки. Что-то более забавное вместо типичного утомительного и утомительного процесса разработки. В..
    Я предполагаю, что вы имеете в виду методы обработки категориальных данных.
    Я предполагаю, что вы имеете в виду методы обработки категориальных данных. Пожалуйста, проверьте мой пост Инструментарий специалиста по данным для кодирования категориальных переменных в..
    Игра в прятки с данными
    Игра в прятки с данными Я хотел бы, чтобы вы сделали мне одолжение и ответили на следующие вопросы. Гуглить можно в любое время, здесь никто не забивается. Сколько регионов в Гане? А как..
    «Раскрытие математических рассуждений с помощью Microsoft MathPrompter и моделей больших языков»
    TL;DR: MathPrompter от Microsoft показывает, как использовать математические рассуждения с большими языковыми моделями; 4-этапный процесс для улучшения доверия и рассуждений в математических..
    Раскройте свой потенциал в области разработки мобильных приложений: Абсолютная бесплатная серия
    Глава 6: Работа в сети и выборка данных Глава 1: Введение в React Native Глава 2: Основы React Native Глава 3: Создание пользовательского интерфейса с помощью React Native Глава 4:..
    Все о кейсах: Camel, Snake, Kebab & Pascal
    В программировании вы сталкивались с ними при именовании переменной, класса или функции. Поддержание согласованности типов и стилей случаев делает ваш код более читабельным и облегчает совместную..