Как переместить скользящий слайдер и мой div в одной строке - PullRequest
Новая
       39

Как переместить скользящий слайдер и мой div в одной строке

0 голосов
/ 14 марта 2019

Я пытаюсь реализовать слайдер HTML с информацией заголовка в начале.

Я создал ниже jsfiddle, но не могу вывести столбец заголовка и ползунок в одну строку. (Без разрыва строки)

Я пытался использовать col-md, но это не помогло. 

<div class="col-md-1 text-right my-2">
    <table />
</div>
<div class="col-md-11 my-2">
    <slider />
</div>

https://jsfiddle.net/rushijoshi/hb2aot65/7/

Ожидаемый результат, см. Изображение: Ожидаемый результат

Я ценю вашу помощь.

Спасибо

Rushi

1 Ответ

0 голосов
/ 15 марта 2019

Просто добавьте класс row к их родителю <div> ?? 

<div class="row">
    <div class="col-md-1 text-right my-3">
        <table />
    </div>
    <div class="col-md-10 m-3">
        <slider />
    </div>
</div>

https://jsfiddle.net/davidliang2008/ht4beqcx/3/

Если вы хотите сохранить фиксированный левый столбец и ползунок в одной строке, вам нужно будет добавить flex-nowrap к строке, чтобы сделать строку недоступной для переноса: 

<div class="row flex-nowrap">
    <div class="col-2 text-right my-3">
        <table />
    </div>
    <div class="col-9 my-3 mx-auto">
        <slider />
    </div>
</div>

https://jsfiddle.net/davidliang2008/ht4beqcx/12/

...