Выровнять содержимое div с помощью бутстрапа

-1

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

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4 text-right">Name:</div> 
     <div class="col-md-4"> 
     <input class="form-control" type="text"> 
     </div> 
    </div> 
</div>

Здесь div для метки 'Name' является моей целью.

Моя тестовая платформа, пожалуйста, измените вид на мобильное зрение here

В связи с настольным мне нужно содержание Div на правой стороне (рядом с текстовым полем). Я использовал «text-right» для достижения этого (это может не потребоваться).

В мобильном режиме (ниже IMG) содержание DIV на правой стороне (это из-за 'право-текста'). Но мне нужно это в левой части.

Без «текст-вправо», это было бы как (ниже IMG), в моем коде я добавил «текст-вправо», чтобы сделать его на правой стороне (который, возможно, не требуется).

Цель: Мне нужно содержание Div на правой стороне для зрения рабочего стола, когда он идет на мобильное зрение, мне нужна ее в левой стороне. Пожалуйста, проигнорируйте текст в правом коде

источник

2016-06-16 NnN

Под «отзывчивым» вы на самом деле имеете в виду «мобильный»? – ZimSystem

https://plnkr.co/edit/tn1vPYIM6qcEx8MgKntK?p=preview –

Проверьте этот plnkr. @Skelly –

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

.container{ 
position: absolute; 
right: 0px; 
width: 400px; 
} 

@media screen and (max-width: 1000px) { 

.container{ 
right: auto; 
left: 50%; 
margin-left: -200px; 
}

источник

2016-06-16 17:59:27

Спасибо, я использовал ваш код, но цель div полностью перемещалась прямо на рабочий стол. Пожалуйста, посмотрите [здесь] (http://www.bootply.com/J9h6eJLGqK). Мой целевой div должен находиться на правой стороне (рядом с текстовым полем). Мне нужно это на левой стороне, если я иду на мобильный просмотр. – NnN

А вы сказали, что слева от центра, но если вы хотите, чтобы он остался, просто измените значение слева от 50% до 0px и удалите «margin-left: -200px;» –

Спасибо, это сработало на мобильном представлении (я получил ярлык в левой части). Но на рабочем столе, если вы видите, что ярлык внутри div будет слева, мне нужно его в правой части. – NnN

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4 col-md-push-4 ">Name:</div> 
 
    <div class="col-md-4 col-md-pull-4"> 
 
     <input class="form-control" type="text"> 
 
    </div> 
 
    </div> 
 
</div>

Попробуйте это. :)

источник

2016-06-16 18:00:52

Выровнять содержимое div с помощью бутстрапа

ответ

Смежные вопросы