Bootstrap позиционирование элементов – Позиционирование элементов в Bootstrap

Позиционирование элементов в Bootstrap

Позиционирование элементов

Последнее обновление: 31.10.2015

При использовании Bootstrap очень удобно позиционировать интерфейс в виде таблицы или сетки, используя строки и столбцы. Так, если мы посмотрим в браузере на стандартное представление Index.cshtml, которое идет по умолчанию, то мы увидим подобное позиционирование: элементы под заголовком расположены как бы в три столбца и составляют одну строку:

Если мы откроем код представления, то мы можем увидеть использование классов bootstrap:

<div>
    <div>
        <h3>Getting started</h3>
        <p>.............</p>
    </div>
    <div>
        <h3>Get more libraries</h3>
        <p>.............</p>
    </div>
    <div>
        <h3>Web Hosting</h3>
        <p>.............</p>
    </div>
</div>

Для создания отдельного столбца строки используется класс col-md-4. col, как ясно из названия, обозначает столбец.

Дальше идет md — идентификатор устройства. Как мы увидели в прошлой теме, bootstrap делит все устройства условно на четыре группы в зависимости от ширины экрана. md, в частности, соотносится со средними устройствами (то есть которые имеют ширину от 992 пикселя и выше). А число 4 указывает, сколько условных единиц в строке будет занимать данный блок. Таким образом, получается, что класс col-md-4 означает, что данный блок будет занимать 4 условных единицы из 12 в строке, то есть треть ширины экрана устройства с экраном шириной от 992 пикселей.

И поскольку у нас есть четыре группы, то для каждой группы имеются свои классы. Например, для очень маленьких устройств с экраном меньше 768 пикселей (то есть мобильных телефонов), подобный класс мог бы быть таким col-xs-4.

Все типы классов:

• col-xs-*: для устройств с шириной экрана меньше 768 пикселей

• col-sm-*: для устройств с шириной экрана от 768 пикселей и выше

• col-md-*: для устройств с шириной экрана от 992 пикселя и выше

• col-lg-*: для устройств с шириной экрана от 1200 пикселей и выше

Хотя даже на мобильных устройствах блок с классом col-md-4 будет выглядеть вполне неплохо, но мы можем установить сразу два класса, чтобы еще больше детализировать отображение на различных устройствах, например:

<div>

И хотя в представлении Index.cshtml по умолчанию все три блока имеют относительную ширину в 4 единицы, составляя в целом 12 единиц, мы можем задать любую другую ширину, позиционируя их по собственному усмотрению. Например:

Отступы

Специальные классы col-md(sm|lg)-offset-* позволяют задать смещение относительно левого блока или начала строки в условных единицах. Например, у нас есть такая строка:

<div>
    <div>
        <h3>Левый блок</h3>
        <p>................</p>
    </div>
    <div>
        <h3>Правый блок</h3>
        <p>................</p>
    </div>
</div>

Класс col-md-offset-4 будет смещать правый блок на 4 условных единицы вправо:

Некоторые примеры по использованию смещения:

Порядок столбцов

С помощью классов col-md(sm|lg)-push-* и col-md(sm|lg)-pull-* мы можем переопределить порядок блоков в строке. Например, класс col-md-push-4 сдвигает блок на четыре единицы вправо от текущего положения. И наоборот, класс

<div>
    <div>
        <h3>Левый блок</h3>
        <p>................</p>
    </div>
    <div>
        <h3>Правый блок</h3>
        <p>................</p>
    </div>
</div>

И у нас был бы тот же эффект. Но мы можем также полностью переупорядочить порядок следования блоков:

<div>
    <div>
        <h3>Левый блок</h3>
        <p>................</p>
    </div>
    <div>
        <h3>Правый блок</h3>
        <p>................</p>
    </div>
</div>

Теперь правый блок сместится влево на четыре единицы, а левый блок — вправо на 8 единиц:

Таким образом, используя класс row и классы столбцов, мы можем задать общее расположение элементов, а адаптивность bootstrap гарантирует, что на любых устройствах подобная сетка элементов будет выглядеть вполне нормально. Теперь рассмотрим некоторые компоненты, которые предлагает нам Bootstrap.

metanit.com

Bootstrap 3 и 4 позиционирование, выравнивание элементов

При работе с bootstrap 3 я использую позиционирование сеткой (таблицей), об этом в начале статьи.

А в bootstrap 4 используется новый режим flexbox, но основные приёмы работы с сеткой остались с небольшими изменениями об этом в середине статьи.

Код скрина выше выглядит следующим образом:

<div> <div> <div> <div> <h5>DESIGN</h5> <p>…</p> </div> </div> <div> <div> <h5>REENGINEERING</h5> <p>…</p> </div> </div> </div> <div> <div> <div> <h5>SUPPORT</h5> <p>…</p> </div> </div> <div> <div> <h5>INSTRUMENTS</h5> <p>…</p> </div> </div> </div> </div>

• Класс row задает расположение блоков в виде одной строки;
• Строка в bootstrap содержит максимум 12 столбцов;
• Класс col-ml-4 задает столбец строки, где
  • col (column) — столбец строки;
  • md — идентификатор устройства, bootstrap разделил все устройства на 4 группы в зависимости от ширины экрана;
  • 4 — количество условных единиц(столбцов) ширины будет занимать блок, из 12. То есть div с классом col-ml-4 займет 1/3 ширины экрана устройства шириной от 992 пикселей;

Типы классов устройств

1. col-xs-*: для устройств с шириной экрана меньше 768 пикселей;
2. col-sm-*: для устройств с шириной экрана от 768 пикселей и выше;
3. col-md-*: для устройств с шириной экрана от 992 пикселя и выше;
4. col-lg-*: для устройств с шириной экрана от 1200 пикселей и выше;

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

<div>

Так же как видно из кода я использовал разные значения столбцов для разных устройств — главное что бы в общем было 12 единиц. Мы можем задавать любую другую ширину для каждого устройства:

Отступы

Классы col-md(sm|lg)-offset-* задают смещение относительно левого блока или начала строки в условных единицах

<div> <div> <h3>Левый блок</h3> <p>…</p> </div> <div> <h3>Правый блок</h3> <p>…</p> </div> </div>

Класс col-md-offset-4 будет смещать правый блок на 4 условных единицы вправо:

Некоторые примеры по использованию смещения:

Порядок столбцов

С помощью классов col-md(sm|lg)-push-* и col-md(sm|lg)-pull-* мы можем переопределить порядок блоков в строке. Например, класс col-md-push-4 сдвигает блок на четыре единицы вправо от текущего положения. И наоборот, класс col-md-pull-4 сдвигает блок влево от текущей позиции. Так, предыдущий пример со смещением мы могли бы переписать таким способом:

<div> <div> <h3>Левый блок</h3> <p>…………….</p> </div> <div> <h3>Правый блок</h3> <p>…………….</p> </div> </div>

Либо изменить порядок следования блоков и получить тот же результат

<div> <div> <h3>Левый блок</h3> <p>…………….</p> </div> <div> <h3>Правый блок</h3> <p>…………….</p> </div> </div>

в последнем примере правый блок сместится влево на четыре единицы, а левый блок — вправо на 8 единиц.

Режим flexbox позволяет макету автоматически вычислять размер каждой колонки.

<div> <div> <div> половина </div> <div> половина </div> </div> <div> <div> Одна третья </div> <div> Одна третья </div> <div> Одна третья </div> </div> </div>

Безразмерные колонки в сетке flexbox будут поровну делить доступное пространство, всегда заполняя весь ряд.

Можно указать размер для одной колонки, а остальные колонки равномерно распределят оставшееся пространство между собой. Укажем размер у среднего блока. Остальные распределятся поровну.

<div> <div> <div> (12 — 6) / 2 = 3 </div> <div> 6 колонок </div> <div> (12 — 6) / 2 = 3 </div> </div> <div> <div> </div> <div> 5 колонок </div> <div> </div> </div> <div> <div> </div> <div> 4 колонки </div> <div> </div> </div> </div>

Используя классы col-{breakpoint}-auto, можно создать блок, размер которого будет определяться его содержимым. Также для блока можно задать классы горизонтального выравнивания. В этом случае общий ряд будет сжат до необходимых размеров.

<div> <div> <div> 1 of 3 </div> <div> Слово </div> <div> 3 of 3 </div> </div> <div> <div> 1 of 3 </div> <div> Два слова </div> <div> 3 of 3 </div> </div> <div> <div> 1 of 3 </div> <div> Здесь три слова </div> <div> 3 of 3 </div> </div> </div>

Можно оставить стандартное поведение, не сжимая общую ширину.

<div> <div> <div> 1 of 3 </div> <div> Два слова </div> <div> 3 of 3 </div> </div> </div>

Вы можете использовать опорные точки для точного задания размеров колонок. В остальных случаях можно ограничиться классами col и col-*.

<div> <div>col</div> <div>col</div> <div>col</div> <div>col</div> </div> <div> <div>col-8</div> <div>col-4</div> </div>

Из стопки в ряд

Используя классы col-sm-*, вы можете создать базовую сеточную систему, которая разместит блоки в виде стопки на телефонах, а затем будет выводить блоки в один ряд.

<div> <div>col-sm-8</div> <div>col-sm-4</div> </div> <div> <div>col-sm</div> <div>col-sm</div> <div>col-sm</div> </div>

Смешиваем все классы

Можете комбинировать все классы, как вам нужно.

<!— Stack the columns on mobile by making one full-width and the other half-width —> <div> <div>.col .col-md-8</div> <div>.col-6 .col-md-4</div> </div> <!— Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop —> <div> <div>.col-6 .col-md-4</div> <div>.col-6 .col-md-4</div> <div>.col-6 .col-md-4</div> </div> <!— Columns are always 50% wide, on mobile and desktop —> <div> <div>.col-6</div> <div>.col-6</div> </div>

Вертикальное выравнивание

Flexbox дает два способа вертикального позиционирования колонок.

Выравниваем колонки внутри ряда относительно верха, середины, низа, если позволяет высота. Указываем у row классы flex-items-xs-start, flex-items-xs-center, flex-items-xs-end.

<div> <div> <div> По верху </div> <div> По верху </div> <div> По верху </div> </div> <div> <div> По центру </div> <div> По центру </div> <div> По центру </div> </div> <div> <div> По низу </div> <div> По низу </div> <div> По низу </div> </div> </div>

Также можно выровнять колонки внутри одного ряда относительно друг друга, если колонки будут использовать классы align-self-start, align-self-center, align-self-end.

<div> <div> <div> One of three columns </div> <div> One of three columns </div> <div> One of three columns </div> </div> </div>

Горизонтальное выравнивание

Создаём блоки, размер которых меньше 12 колонок. Дальше управляем их выравниванием из-за свободного места, указывая у ряда row классы justify-content-start, justify-content-center, justify-content-end. Также обратите внимание на классы justify-content-around, justify-content-between, которые окружают свободно место.

<div> <div> <div> По левому краю </div> <div> По левому краю </div> </div> <div> <div> По центру </div> <div> По центру </div> </div> <div> <div> По правому краю </div> <div> По правому краю </div> </div> <div> <div> Around </div> <div> Around </div> </div> <div> <div> Between </div> <div> Between </div> </div> </div>

Промежутки

Используйте класс .no-gutters, чтобы убрать промежутки между блоками. Класс удаляет отрицательные margins из .row и горизонтальные padding из всех дочерних колонок.

Сортировка колонок

В обычной системе сеток, если нам необходимо поменять порядок колонок, нам нужно использовать push и pull.

Разработчики Bootstrap реализовали встроенное свойство flexbox order на основе трех классов сортировки, которые применим к колонкам col:

• .flex-first – отображается первым
• .flex-last – отображается последним
• .flex-unordered – отображается между первым и последним

<div> <div> <div> Первый, но не первый и не последний </div> <div> Второй, но последний </div> <div> Третий, но первый </div> </div> </div>

Смещение колонок

Для сдвига колонок вправо используйте .offset-md-*, которые увеличивают левый отступ на * колонок. Например, .offset-md-4 сдвигает на четыре колонки.

<div> <div> <div>.col-md-4</div> <div>.col-md-4 .offset-md-4</div> </div> <div> <div>.col-md-3 .offset-md-3</div> <div>.col-md-3 .offset-md-3</div> </div> <div> <div>.col-md-6 .offset-md-3</div> </div> </div>

Таким образом, используя класс row и классы столбцов, мы можем задать общее расположение элементов, а адаптивность bootstrap гарантирует, что на любых устройствах подобная сетка элементов будет выглядеть вполне нормально.

https://v4-alpha.getbootstrap.com/utilities/flexbox/ http://webmaster.alexanderklimov.ru/pagemaker/bootstrap/flexbox.php

leodev.ru

html — Позиционирование элементов в bootstrap

2. 0
3. +0
• Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
• Справка Подробные ответы на любые возможные вопросы
• Мета Обсудить принципы работы и политику сайта
• О нас Узнать больше о компании Stack Overflow
• Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
6. Войти Регистрация

7. текущее сообщество

ru.stackoverflow.com

Bootstrap центрирование – всевозможные способы выравнивания на сайте

Приветствую всех желающих досконально изучить Bootstrap 3! В текущей публикации я затрону тему, касающуюся выравнивания объектов и текста в соответствии с вашими потребностями. Другое ее название – это Bootstrap центрирование.

Данная тематика востребована при верстке сайтов и, следовательно, очень важно разбираться в этой области. Поэтому я расскажу вам, как производится центрирование по вертикали, горизонтали, каким способом можно выровнять изображения в блоках и переместить панель меню. Вперед за обучение!

Горизонтальное центрирования

Начнем с самого простого – горизонтального выравнивания контента. Для этого во фреймворке были предусмотрены специальные встроенные классы, благодаря которым можно указывать тип выравнивания объектов. Все они перечислены в таблице, прикрепленной ниже.

Для сравнения работы названных классов выполните пример.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
p{ color: blue; font-size: 27px;}
</style>
</head>
<body>
 
<div>
<p>Абрикосы</p>
<p>Мандарины</p>
<p>Апельсины</p>
<p>Арбузы</p>
<p>Персики</p>
 
</div>
 
</body>
</html>

<!DOCTYPE html> <html lang=»en»> <head> <title>Bootstrap Example</title> <meta charset=»utf-8″> <meta name=»viewport» content=»width=device-width, initial-scale=1″> <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css»> <script src=»https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js»></script> <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js»></script> <style> p{ color: blue; font-size: 27px;} </style> </head> <body> <div> <p>Абрикосы</p> <p>Мандарины</p> <p>Апельсины</p> <p>Арбузы</p> <p>Персики</p> </div> </body> </html>

Также существуют и другие элементы для описываемого вида выравнивания. Это pull-left и pull-right. Их работу можно сравнить со свойством float в каскадных таблицах стилей css.

Помимо этого, можно воспользоваться знакомой вам системой сеток. Эта технология очень гибкая и востребованная. Так что думаю вы уже знакомы с ней (если нет, то можете прочитать соответствующие статьи на моем блоге). Используя ее, у разработчика появляется возможность без лишних усилий располагать текст, видео, img внутри колонок с любой стороны.

Вертикальное центрирование

Реализация такого вида выравнивая выполняется несколько сложнее, чем предыдущего, так как ни в языке html, ни в Бутстрапе нет готовых встроенных механизмов. Поэтому девелоперы используют персональные решения проблемы. Однако на сегодняшний день существует несколько наиболее популярных вариантов, которые мы с вами и обсудим.

Grid System и padding

Начну с очевидного – Grid System и указание внутренних отступов. Это наиболее простой и легкий способ решения вертикального центрирования информации. Таким образом выравнивать можно предложения, видео и фото. Для лучшего понимания проанализируйте пример. В нем я создал блок посреди страницы и выровнял его содержимое.

1
2
3
4
5
6
7
8

<div>
  <div>
    <div>
       <h3 >Третье чудо света!</h3>
       <img src="http://www.votpusk.ru/story/edit/foto/large/32086.jpg" alt="Photo">
    </div>
  </div>
</div>

<div> <div> <div> <h3 >Третье чудо света!</h3> <img src=»http://www.votpusk.ru/story/edit/foto/large/32086.jpg» alt=»Photo»> </div> </div> </div>

А теперь добавьте в хедере документа описание стилей css:

<style>

.main {

background-color:  #A52A2A;

padding: 35px;

}

</style>

Табличное представление

Второй популярный вариант центрирования по вертикали – это использование табличных представлений. Только не думайте, что я предлагаю вам сейчас создать простую таблицу и внести в нее информацию! Данный механизм достигается при помощи свойств стилевых таблиц.

Для этого вам нужно родительскому элементу прописать тип отображения display: table. А дочерние объекты поместить в ячейки этой таблицы, т.е. указать им значение одноименного свойства равным table- cell. И теперь после проделанных махинаций появляется возможность использовать такой параметр, как vertical-align. Пропишите его вместе со значением «middle».

Итак, код внутри тега <body> будет выглядеть следующим образом:

1
2
3
4
5
6

<div>
<div>
       <h3 >Третье чудо света!</h3>
       <p><img  src="http://www.votpusk.ru/story/edit/foto/large/32086.jpg" alt="Photo"></p>
</div>
</div>

<div> <div> <h3 >Третье чудо света!</h3> <p><img src=»http://www.votpusk.ru/story/edit/foto/large/32086.jpg» alt=»Photo»></p> </div> </div>

А для стилевого оформления укажите:

1
2
3
4
5
6
7
8
9
10
11
12
13

<style>
.parent { 
height: 560px;
background-color:  #A52A2A;
  width:100%; 
  display: table;
}
.child {
    display: table-cell;
    vertical-align: middle; 
}
img { width: 690px; height: auto;}
</style>

<style> .parent { height: 560px; background-color: #A52A2A; width:100%; display: table; } .child { display: table-cell; vertical-align: middle; } img { width: 690px; height: auto;} </style>

Редактирование отображения навигации

И напоследок, как и обещал, разберем, как перемещать панель меню.

Для структурированного размещения навигационной панели в основном используется, не поверите, опять система сеток. Если вам нужно, чтобы меню располагалось в шапке сайта, то и в коде этот элемент располагается первым.

Однако бывают такие ситуации, когда вкладки меню находятся под, к примеру, баннером. Для этого изначально создают разметку рекламы, а после вставляют код навигации. Таким образом, вы можете разместить Navbar в любом месте веб-страницы.

Другой вариант – использование внешних (margin) и внутренних (padding) отступов.

Однако есть и встроенные классы выравнивания описываемого объекта. Это .navbar-fixed-top и .navbar-fixed-bottom, которые закрепляют навигационный блок сверху или снизу страницы соответственно. А также есть класс .navbar-right, который выравнивает пункты меню по правой стороне. Напомню, что по умолчанию они размещаются слева.

Спасибо за ваше внимание. Если вам понравилась публикация, то подписывайтесь на обновления моего блога и рассказывайте о нем друзьям. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 586 раз

romanchueshov.ru

Bootstrap 3 — Изменение порядка следования адаптивных блоков в макете

04.11.2014(обновлено: 11.05.2018) Александр Мальцев

В этой статье познакомимся с классами сетки Bootstrap 3, предназначенными для адаптивного изменения порядка следования блоков в пределах строки, в которой они расположены.

Фреймворк Bootstrap содержит большое количество классов и компонентов. Но перед тем как переходить к наполнению сайта этими элементами, необходимо сначала создать каркас (макет) страницы. Данное действие в Bootstrap выполняется с помощью «строительных» элементов сетки. К этим элементам относятся обёрточные контейнеры, ряды, адаптивные блоки и др. Более подробно ознакомиться с этими элементами можно в статье «Bootstrap 3 – Сетка».

Но при проектировании макета зачастую бывает так, что необходимо на одних устройствах блоки расположить в одном порядке, а на других – в другом. Для реализации этого поведения блоков в Bootstrap 3 предназначены классы push и pull.

Классы push и pull

Классы push и pull предназначены для изменения порядка следования адаптивных блоков для конкретных типов устройств в пределах некоторой строки. Это означает, что адаптивные блоки на одном устройстве могут иметь один порядок следования, а на другом другой.

Классы push и pull должны использоваться вместе с классами сетки Bootstrap. Класс push выполняет смещение адаптивного блока на определённое количество колонок вправо, а класс pull — на определённое количество колонок влево.

Синтаксис классов push и pull:

col-{breakpoint}-push-{nc}
col-{breakpoint}-pull-{nc}

{breakpoint} - тип устройства (xs, sm, m или lg)
{nc} - количество колонок (по умолчанию 0...12)

В следующей таблице показан синтаксис классов push и pull для различных размеров экрана.

Пример использования классов push и pull

Рассмотрим небольшой пример. Допустим, есть макет, состоящий из трёх блоков. Необходимо, чтобы на больших экранах блоки располагались горизонтально. Причём второй (2) блок, который содержит основной контент, находился посередине между первым (1) и третьим (3) блоками.

В то же время, на устройствах с маленьким экраном, нужно чтобы блоки располагались вертикально один под другим. Причём второй (2) блок должен располагаться над первым (1).

Разработку макета начнём с устройств, имеющих маленький размер экрана (xs и sm):

<div>
  <div>
    2 блок
  </div>
  <div>
    1 блок
  </div>
  <div>
    3 блок
  </div>
</div>

Доработаем адаптивные блоки, а именно установим им ширину, которые они должны иметь на средних и больших экранах:

<div>
  <div>
    2 блок
  </div>
  <div>
    1 блок
  </div>
  <div>
    3 блок
  </div>
</div>

Теперь изменим порядок следования адаптивных блоков. Для этого второй (2) адаптивный блок сдвинем вправо на 3 колонки, а первый (1) сдвинем влево на 6 колонок Bootstrap.

<!-- Boostrap 3 -->  
<div>
  <div>
    2 блок
  </div>
  <div>
    1 блок
  </div>
  <div>
    3 блок
  </div>
</div>

Рекомендации по разработке макета с помощью сетки Bootstrap

При создании макета с использованием сетки фреймворка Bootstrap 3 предпочтительнее начинать разработку с устройств, которые имеют крохотный размер экрана (смартфоны).

Почему так? Потому что изменить порядок следования адаптивных блоков для устройств с большим размером экрана намного проще, чем для устройств с крохотным экраном.

itchief.ru

javascript — Позиционирование элементов Bootstrap 3

В codepen ниже, я пытаюсь сделать его похожим на прилагаемом изображении на всех размерах. Две вещи, которые не работают правильно — в первой строке с номерами, зеленые цифры изменение цены на день и изменение в процентах (только зеленый текст на странице). При большом размере окна браузера, они отдаляются друг от друга слишком много. Есть ли способ, чтобы заставить их остаться рядом друг с другом во всех размерах?

Я также с трудом выяснить, как сделать поле ввода текста рядной формы всегда занимает 50% от этой линии, и сделать кнопку «Получить новый Quote» всегда занимает 50% во всех размерах — как в прилагаемом изображении ,

CodePen Ссылка

<head>
  <title>Stock Quotes</title>
  <meta charset='utf-8' />
  <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>

<body>
  <div>
    <div>
      <div>
        <h2></h2>
      </div>
    </div>
    <div>
      <hr />
    </div>
    <div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <hr>
    <div>
      <p></p>Range</div>
    <hr>
    <div>
      <p></p>Open</div>
    <hr>
    <div>
      <p></p>Volume</div>
    <hr>
    <div>
      <p></p>Market Cap</div>
    <hr>
    <div>
      <div></div>
    </div>
    <hr>
    <div>
      <form>
        <div class=form-group>
          <input type='text'>
        </div>
        <button type='submit'>Get New Quote</button>
    </div>
    </form>
  </div>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
  <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css' />
  <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
  </div>
</body>

</html>

coredump.su

Позиционирующие элементы Bootstrap 3 — javascript

В кодедере ниже я пытаюсь сделать его похожим на прикрепленное изображение всех размеров. Две вещи работают некорректно — в первой строке с цифрами зеленые цифры — это изменение цены дня и изменение процента (единственный зеленый текст на странице). При большом размере браузера они слишком много дрейфуют. Есть ли способ заставить их оставаться рядом друг с другом во всех размерах?

Мне также трудно понять, как сделать поле ввода текста inline-формы всегда занимать 50% этой строки, и сделать кнопку «Получить новую заявку» всегда занимает 50% всех размеров — например, в прикрепленном изображении,

CodePen Link

<head>
  <title>Stock Quotes</title>
  <meta charset='utf-8' />
  <meta name='viewport' content='"width=device-width, initial-scale=1'>
</head>

<body>
  <div>
    <div>
      <div>
        <h2></h2>
      </div>
    </div>
    <div>
      <hr />
    </div>
    <div>
      <div></div>
    </div>
    <div>
      <div></div>
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <hr>
    <div>
      <p></p>Range</div>
    <hr>
    <div>
      <p></p>Open</div>
    <hr>
    <div>
      <p></p>Volume</div>
    <hr>
    <div>
      <p></p>Market Cap</div>
    <hr>
    <div>
      <div></div>
    </div>
    <hr>
    <div>
      <form>
        <div>
          <input type='text'>
        </div>
        <button type='submit'>Get New Quote</button>
    </div>
    </form>
  </div>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
  <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css' />
  <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
  </div>
</body>

</html>

qaru.site