Div не встроен, когда на мобильном дисплее

Question

Div не встроен, когда на мобильном дисплее

-2

У меня есть этот код, который я разместил каждую метку и пробел в class=col-sm-6

echo 'Контактная информация

    <div class="panel-body">

    <div class="col-sm-6">
    <label class="head6">Full Name : </label>
    <span class="head9 halfR">'.$fullname1.'</span>
    </div>

    <div class="col-sm-6">
    <label class="head6">Birthdate : </label>
    <span class="head9 halfR">'.$bday.'</span>
    </div>

    <div class="col-sm-6">
    <label class="head6">Email : </label>
    <span class="head9 halfR">'.$email.'</span>
    </div>

    <div class="col-sm-6">
    <label class="head6">Address : </label>
    <div class="halfR">
    <span class="head9">'.$address.'</span>
    </div>
    </div>

    <div class="col-sm-6">
    <label class="head6">City : </label>
    <div class="halfR">
    <span class="head9">'.$city.'</span>
    </div>
    </div>

    <div class="col-sm-6">
    <label class="head6">State : </label>
    <span class="head9 halfR">'.$state.'</span>
    </div>
    </div>

    <div class="col-sm-6">
    <label class="head6">Zip Code : </label>
    <span class="head9 halfR">'.$zip.'</span>
    </div>
    </div>

    <div class="col-sm-6">
    <label class="head6">Phone Number : </label>
    <span class="head9 halfR">'.$phone.'</span>
    </div>
    </div>

    <div class="col-sm-6">
    <label class="head6">Fax : </label>
    <span class="head9 halfR">'.$fax.'</span>
    </div>
    </div>

    <div class="col-sm-6">
    <label class="head6">Company Position : </label>
    <span class="head9 halfR">'.$position.'</span>
    </div>
    </div>

    </div>
    </div>
    </div> 


    ';

и это выглядит так (рабочий стол) , но в мобильном режиме это выглядит так. метка и интервал не совпадают.

как я могу его выровнять?

btw, класс halfR содержит это..

.halfR{
  width:60%;
  float:right;
  word-wrap:break-word;
}

Aidyl Baylon 23 сен. 2015, в 12:15

Источник

0

можете поделиться ссылкой jsfiddle?
Ishimdar Ahamad 23 сен. 2015, в 10:11

Теги:

twitter-bootstrap

html

css

2 ответа

Ещё вопросы

Arun Kumar M · Answer 1 · 2015-09-23T11-32-00.000Z

используйте row класса, как показано ниже

<div class="row">
    <div class="col-sm-6"></div>
    <div class="col-sm-6"></div>
</div>

<div class="row">
    <div class="col-sm-6"></div>
    <div class="col-sm-6"></div>
</div>

CodePB · Answer 2 · 2015-09-23T10-25-00.000Z

Это не встроено, потому что ваши метки слишком длинны, чтобы 60% -ная ширина.halfR должна переполняться до следующей строки.

Попробуйте добавить максимальную ширину к меткам, используя медиа-запросы для мобильного просмотра (или, желательно, добавить максимальную ширину и затем удалить ее с помощью мультимедийных запросов для мобильного подхода)

.col-sm-6 label{
    max-width: 35%;
}

Как утверждает Арун в своем ответе, вы должны также обернуть каждую группу в div с помощью строки класса. Это не остановит встроенную проблему, но убедитесь, что ваши ряды остаются вместе.