Question

我有这个html代码，旁边有一个标签和一个输出。

<div class="panel-body">

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

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

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

                    </div>

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

我有这个css来控制输出与标签的距离。

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

它在桌面视图上看起来很好，问题是当我将它重新调整为移动尺寸时就会变成这样...

我该如何解决这个问题？它应该是响应。任何答案都将不胜感激。

Answer 1

尝试这样或使用引导表http://getbootstrap.com/css/#tables

                <div class="col-sm-12">
                    <label class="head6">Business Name : </label><span class="head9 halfR">'.$name.'</span>
                </div>

                <div class="col-sm-12">
                    <label class="head6">Website URL : </label><span class="head9 halfR">'.$url.'</span>    
                </div>

                <div class="col-sm-12">
                    <label class="head6">Tagline : </label><span class="head9 halfR">'.$tagline.'</span>

                </div>

                <div class="col-sm-12">
                    <label class="head6">Description : </label><span class="head9 halfR">'.$descrip.'</span>    
                </div>

响应标签和文本输出对齐

1 个答案: