Question

我有这个代码我将每个标签和范围放在class=col-sm-6

中回声＆＃39; 联系信息

    <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，class halfR包含这个..

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

Answer 1

它不是内联的，因为你的标签太长，以至于.halfR的60％宽度必须溢出到下一行。

尝试使用移动视图的媒体查询为标签添加最大宽度（或者最好添加最大宽度，然后使用媒体查询将其移除，以便首先使用移动设备）

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

正如Arun在他的回答中所述，你还应该将每个组包装在一个带有类行的div中。这不会停止内联问题，但会确保您的行保持在一起。

Answer 2

使用课程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>

在移动显示屏中Div不是内联的

2 个答案: