У меня есть этот код, который я разместил каждую метку и пробел в 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;
}
используйте 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>
Это не встроено, потому что ваши метки слишком длинны, чтобы 60% -ная ширина.halfR должна переполняться до следующей строки.
Попробуйте добавить максимальную ширину к меткам, используя медиа-запросы для мобильного просмотра (или, желательно, добавить максимальную ширину и затем удалить ее с помощью мультимедийных запросов для мобильного подхода)
.col-sm-6 label{
max-width: 35%;
}
Как утверждает Арун в своем ответе, вы должны также обернуть каждую группу в div с помощью строки класса. Это не остановит встроенную проблему, но убедитесь, что ваши ряды остаются вместе.