Блог

Главная - Вопросы по программированию - Динамическое изменение положения элемента в зависимости от размера экрана

Динамическое изменение положения элемента в зависимости от размера экрана

#css #asp.net-mvc #twitter-bootstrap #twitter-bootstrap-3

#css #asp.net-mvc #twitter-bootstrap #twitter-bootstrap-3

Вопрос:

Вот фрагмент моего кода (из asp.net mvc веб-приложения):

 <div class="jumbotron" style="margin-top: 20px; margin-bottom: -25px">
    <div class="row" style="margin-left: 0px; margin-top: -50px; margin-bottom: 20px">
<h2>ipsum lorem</h2>
</div>

<div class="row row-eq-height">
    <div class="col-md-3" style="vertical-align: top;">
        <a href="@Url.Action("Index", "ApplicationForm")" 
         class="btn btn-primary btn-lg" style="width: 200px; margin-top: 8px">Full</a>
    </div>
    <div class="col-md-9" style="vertical-align: top;">
        <div style="font-weight: bold">ipsum lorem</div>
        ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
        lorem ipsum lorem ipsum lorem
    </div>
</div>

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

Я хотел бы изменить это и отобразить его под кнопкой. Есть ли способ добиться этого с помощью CSS или Bootstrap ?

Спасибо.

Ответ №1:

Если я вас правильно понимаю, вы могли бы сделать что-то вроде этого:

 <div class="row row-eq-height">
  <div class="col-md-3 col-sm-12 col-xs-12" style="vertical-align: top;">
    <a href="@Url.Action("Index", "ApplicationForm")" 
     class="btn btn-primary btn-lg" style="width: 200px; margin-top: 8px">Full</a>
  </div>
  <div class="col-md-9 col-sm-12 col-xs-12" style="vertical-align: top;">
    <div style="font-weight: bold">ipsum lorem</div>
    ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    lorem ipsum lorem ipsum lorem
  </div>
</div>
Метки: