Html 大多数'；优雅'；制作2x2盒div的方法

我构建了一个“Buzzfeed式”问答应用程序，每个问题有四个答案选择。在手机上，我对它的布局很满意（一个2x2的盒子）。 然而，在桌面上，答案只是在屏幕上水平显示为4个选项。 主要的问题是我使用Angular生成所有的问题和答案选择，这使得样式设计有点棘手。 关于如何“优雅地”编写html/css代码，使其始终将答案选项显示为2x2框，您有什么想法吗？我曾尝试使用媒体查询，但感觉就像在大伤口上贴绷带一样

当前代码和图片如下：

HTML:

移动视图（首选）：

桌面视图（希望看起来像移动视图）：

---

最优雅的

？也许是一个框架

为了实现这一目标

<div clas="row">
    <div class="col-md-3 col-xs-6">
        1
    </div>
    <div class="col-md-3 col-xs-6">
        2
    </div>
    <div class="col-md-3 col-xs-6">
        3
    </div>
    <div class="col-md-3 col-xs-6">
        4
    </div>

</div>

1.
2.
3.
4.

最优雅的

？也许是一个框架

为了实现这一目标

<div clas="row">
    <div class="col-md-3 col-xs-6">
        1
    </div>
    <div class="col-md-3 col-xs-6">
        2
    </div>
    <div class="col-md-3 col-xs-6">
        3
    </div>
    <div class="col-md-3 col-xs-6">
        4
    </div>

</div>

1.
2.
3.
4.

最优雅的

？也许是一个框架

为了实现这一目标

<div clas="row">
    <div class="col-md-3 col-xs-6">
        1
    </div>
    <div class="col-md-3 col-xs-6">
        2
    </div>
    <div class="col-md-3 col-xs-6">
        3
    </div>
    <div class="col-md-3 col-xs-6">
        4
    </div>

</div>

1.
2.
3.
4.

最优雅的

？也许是一个框架

为了实现这一目标

<div clas="row">
    <div class="col-md-3 col-xs-6">
        1
    </div>
    <div class="col-md-3 col-xs-6">
        2
    </div>
    <div class="col-md-3 col-xs-6">
        3
    </div>
    <div class="col-md-3 col-xs-6">
        4
    </div>

</div>

1.
2.
3.
4.

有两种使用角度的解决方案，但可能最简单的方法是在第三个元素的开头插入换行符

<br ng-if="($index) % 2 == 0 && $index != 0"/>

使用时，angular有一个名为$index的局部作用域变量，它在每次重复时递增。我们对它进行了一些模块划分，确保它不会显示在第一个索引上，并且您拥有所需的内容

<div class="jumbotron text-center" ng-hide="quizComplete">
    <h3>{{ questions[number].ask }}</h3>
    <div class="row">
        <div ng-repeat="answer in questions[number].answers" class="choice">
            <br ng-if="($index) % 2 == 0 && $index != 0"/>
            <div ng-click="recordChoice(answer.points)">
                <span class="centerer"></span>
                <span class="centered">{{ answer.choice }}</span>
            </div>
        </div>
    </div>
</div>

{{问题[编号]。询问}


{{answer.choice}

有两种使用角度的解决方案，但可能最简单的方法是在第三个元素的开头插入换行符

<br ng-if="($index) % 2 == 0 && $index != 0"/>

使用时，angular有一个名为$index的局部作用域变量，它在每次重复时递增。我们对它进行了一些模块划分，确保它不会显示在第一个索引上，并且您拥有所需的内容

<div class="jumbotron text-center" ng-hide="quizComplete">
    <h3>{{ questions[number].ask }}</h3>
    <div class="row">
        <div ng-repeat="answer in questions[number].answers" class="choice">
            <br ng-if="($index) % 2 == 0 && $index != 0"/>
            <div ng-click="recordChoice(answer.points)">
                <span class="centerer"></span>
                <span class="centered">{{ answer.choice }}</span>
            </div>
        </div>
    </div>
</div>

{{问题[编号]。询问}


{{answer.choice}

有两种使用角度的解决方案，但可能最简单的方法是在第三个元素的开头插入换行符

<br ng-if="($index) % 2 == 0 && $index != 0"/>

使用时，angular有一个名为$index的局部作用域变量，它在每次重复时递增。我们对它进行了一些模块划分，确保它不会显示在第一个索引上，并且您拥有所需的内容

<div class="jumbotron text-center" ng-hide="quizComplete">
    <h3>{{ questions[number].ask }}</h3>
    <div class="row">
        <div ng-repeat="answer in questions[number].answers" class="choice">
            <br ng-if="($index) % 2 == 0 && $index != 0"/>
            <div ng-click="recordChoice(answer.points)">
                <span class="centerer"></span>
                <span class="centered">{{ answer.choice }}</span>
            </div>
        </div>
    </div>
</div>

{{问题[编号]。询问}


{{answer.choice}

有两种使用角度的解决方案，但可能最简单的方法是在第三个元素的开头插入换行符

<br ng-if="($index) % 2 == 0 && $index != 0"/>

使用时，angular有一个名为$index的局部作用域变量，它在每次重复时递增。我们对它进行了一些模块划分，确保它不会显示在第一个索引上，并且您拥有所需的内容

<div class="jumbotron text-center" ng-hide="quizComplete">
    <h3>{{ questions[number].ask }}</h3>
    <div class="row">
        <div ng-repeat="answer in questions[number].answers" class="choice">
            <br ng-if="($index) % 2 == 0 && $index != 0"/>
            <div ng-click="recordChoice(answer.points)">
                <span class="centerer"></span>
                <span class="centered">{{ answer.choice }}</span>
            </div>
        </div>
    </div>
</div>

{{问题[编号]。询问}


{{answer.choice}

使用标记的最简单解决方案是设置

行的宽度。您的选择是128px，总边距为16px，因此将
行的宽度设置为两倍，或者再设置一点，以便在
内联（-block）
元素之间添加大约4倍的空白

.row
{
     width:300px;
}


我不会说这是最优雅的解决方案，只是没有重构代码的最简单的修复。您还可以尝试使用
float:left
而不是
内联块
。选择：第n个子元素（奇数）{clear:both}
，以使其他元素从新行开始

使用标记的最简单解决方案是设置
行的宽度。您的选择是128px，总边距为16px，因此将
行的宽度设置为两倍，或者再设置一点，以便在
内联（-block）
元素之间添加大约4倍的空白

.row
{
     width:300px;
}


我不会说这是最优雅的解决方案，只是没有重构代码的最简单的修复。您还可以尝试使用
float:left
而不是
内联块
。选择：第n个子元素（奇数）{clear:both}
，以使其他元素从新行开始

使用标记的最简单解决方案是设置
行的宽度。您的选择是128px，总边距为16px，因此将
行的宽度设置为两倍，或者再设置一点，以便在
内联（-block）
元素之间添加大约4倍的空白

.row
{
     width:300px;
}


我不会说这是最优雅的解决方案，只是没有重构代码的最简单的修复。您还可以使用
float:left
而不是
inline block
进行试验。选项：第n个子（奇数）{clear:tweet}
到ge