Question

这可能是一个非常微不足道的问题，但我无法理解它。我创建了一个容器流体，里面有行，非常基本的东西，但我希望它不会叠加在移动版本中并保持在面板中。

它保留在移动版的面板中，但结果令人恐惧。我在彼此的顶部显示两行，其中一行包含有关玩家点数，比率，得分等的信息，而较低的一行具有值。但是，当它们堆叠起来时根本没有任何意义。

我正在使用 javascript 动态创建所有元素，但这不重要，问题是我不知道此时要更改哪个类。

//Creates the row
function createRow(pos,name,coef,ratio,points){
    //This is the horizontal row
    var upper_row = document.createElement("div");
    upper_row.className = "row";
    //These are the horizontally positioned elements
    var koht = document.createElement("div");
    koht.className = "col-xs-1 suurem";
    koht.textContent = pos;
    var tyhi = document.createElement("div");
    tyhi.className = "col-xs-7 suurem";
    tyhi.textContent = name;
    var koef = document.createElement("div");
    koef.className = "col-xs-1 suurem rait";
    koef.textContent = coef;
    var suhe = document.createElement("div");
    suhe.className = "col-xs-2 suurem mid";
    suhe.textContent = ratio;
    var point = document.createElement("div");
    point.className = "col-xs-1 suurem rait";
    point.textContent = points;
    //Adds elements to row children
    upper_row.appendChild(koht);
    upper_row.appendChild(tyhi);
    upper_row.appendChild(koef);
    upper_row.appendChild(suhe);
    upper_row.appendChild(point);
    return upper_row;
}

其中

.inf {
    font-weight: bold;
}

.suurem{
    font-size: 18px;
}
.vasak{
    text-align: left;
}

.mid{
    text-align: center;
}

.rait{
    text-align: right;
}

这就是它在桌面上的样子：

正如我之前提到的，行中的位置在移动版本中完全混乱（P运行到KOHT等等......）。我无法提供图片，但我在华为G6上测试过并不喜欢结果。

我想要的结果是元素的位置与它们在上图中的位置相同。

Answer 1

使用表格可以获得相同的结果，并且可以在不同的屏幕尺寸上正常工作

http://jsfiddle.net/ugnjebse/

<div class='container'>
    <div class='row'>
        <div class='col-sm-12'>
            <div class='panel panel-default'>
                <div class='panel-heading'> <span class='panel-header'>Title</span>

                </div>
                <div class='panel-body'>
                    <table class='table'>
                        <thead>
                            <tr>
                                <th>KOHT</th>
                                <th></th>
                                <th>K</th>
                                <th>S</th>
                                <th>T</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Kevin</td>
                                <td>0</td>
                                <td>0:0</td>
                                <td>0</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>James</td>
                                <td>0</td>
                                <td>0:0</td>
                                <td>0</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Steve</td>
                                <td>0</td>
                                <td>0:0</td>
                                <td>0</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>Foo</td>
                                <td>0</td>
                                <td>0:0</td>
                                <td>0</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

保持较小屏幕上连续的元素顺序

1 个答案: