响应式 Flexbox 的三列布局答案

【问题标题】：Three Column Layout with Flexbox on responsive响应式 Flexbox 的三列布局
【发布时间】：2019-10-13 16:12:08
【问题描述】：

我对三个布局列进行了一次小型投票。

在桌面上看起来像这样：

我的问题出在手机屏幕上。我有一个人在另一个人之下，然后是问题。见下图。

我想要实现的是第 1 个人，然后是问题，第 2 个人，然后是问题，第 3 个人，然后是问题，如下所示：

有人知道如何解决这个问题吗？

这里是 HTML：

  <div class="col-md-12 col-xs-12">
<div class="d-table">
        <div class="d-table-row">
            <div class="d-table-cell align-middle"></div>
            <div class="d-table-cell align-middle">
                <div class="titleMiddle">Person 1</div>
            </div>
            <div class="d-table-cell align-middle">
                <div class="titleMiddle">Person 2</div>
            </div>
            <div class="d-table-cell align-middle">
                <div class="titleMiddle">Person 3</div>
            </div>
        </div>
        <div class="d-table-row">
            <div class="d-table-cell align-middle pb-4">
                <div class="question">

                    <div class="smalltitle">
                        <span class="prefiks">1</span>
                        <span>This is a very nice question</span>
                    </div>
                </div>
            </div>
            <div class="d-table-cell align-middle pb-4">
                <div class="horizontal">
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="1">
                        </div>
                        <div class="answerText">1</div>
                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">
                            <input type="radio" name="name" value="2">
                        </div>
                        <div class="answerText">2</div>
                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="3">
                        </div>

                        <div class="answerText">3</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="4">
                        </div>
                        <div class="answerText">4</div>
                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="5">

                        </div>

                        <div class="answerText">5</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">
                            <input type="radio" name="name" value="6">
                        </div>
                        <div class="answerText">No answer</div>

                    </div>
                </div>
            </div>
            <div class="d-table-cell align-middle pb-4">
                <div class="horizontal">
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="1">

                        </div>

                        <div class="answerText">1</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="2">

                        </div>

                        <div class="answerText">2</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="3">

                        </div>

                        <div class="answerText">3</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="4">

                        </div>

                        <div class="answerText">4</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="5">

                        </div>

                        <div class="answerText">5</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="6">

                        </div>

                        <div class="answerText">No Answer</div>

                    </div>
                </div>

            </div>
            <div class="d-table-cell align-middle pb-4">
                <div class="horizontal">
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="1">

                        </div>

                        <div class="answerText">1</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="2">

                        </div>

                        <div class="answerText">2</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="3">

                        </div>

                        <div class="answerText">3</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="4">

                        </div>

                        <div class="answerText">4</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="5">

                        </div>

                        <div class="answerText">5</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="6">

                        </div>

                        <div class="answerText">No answer</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>

CSS

.d-table {
    display: table!important;
}
.d-table-row {
    display: table-row !important;
}
* {
    -webkit-font-smoothing: antialiased;

}
*, ::after, ::before {
    box-sizing: inherit;
}

.d-table-cell {
    display: table-cell!important;
}

.align-middle {
    vertical-align: middle!important;
}
.align-middle > div {
    margin-right: 50px;
}
.titleMiddle {
    font-weight: 700;
    margin-bottom: 30px;
}
.pb-4, .py-4 {
    padding-bottom: 1.5rem!important;
}

.smalltitle {
  margin-bottom: 20px;
}

.horizontal {
    display: flex !important;
    flex-direction: row !important;
}

.answer {
  margin-left: 15px;
    margin-bottom: 5px;
    padding: 6px;
}

.answerRight {
      display: flex !important;
    flex-direction: row !important;
    align-items: center;
}
input[type='radio'] {
    width: 13px;
    height: 13px;
    background: white;
    border-radius: 50%!important;
    border: 1px solid #343c49;
    -moz-appearance: none;
    -webkit-appearance: none;
}

input[type='radio']:checked {
    background: #06c;
}

.answerText {
    margin-left: 0.375rem;
}

【问题讨论】：

标签： javascript html css bootstrap-4 flexbox

【解决方案1】：

你试过了吗？

<div class="col-md-12 col-xs-12">
    <div class="d-table">
        <div class="d-table-row">
            <div class="d-table-cell align-middle">This is a very nice question</div>
            <div class="d-table-cell align-middle">
                <div class="titleMiddle">Person 1</div>
                    <div class="d-table-cell align-middle pb-4">
                    <div class="horizontal">
                        <div class="answer answerRight">
                            <div class="answerInput">

                            <input type="radio" name="name" value="1">
                        </div>
                        <div class="answerText">1</div>
                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">
                            <input type="radio" name="name" value="2">
                        </div>
                        <div class="answerText">2</div>
                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="3">
                        </div>

                        <div class="answerText">3</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="4">
                        </div>
                        <div class="answerText">4</div>
                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="5">

                        </div>

                        <div class="answerText">5</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">
                            <input type="radio" name="name" value="6">
                        </div>
                        <div class="answerText">No answer</div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="d-table-cell align-middle">
                <div class="titleMiddle">Person 2</div>
                                 <div class="d-table-cell align-middle pb-4">
                <div class="horizontal">
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="1">
                        </div>
                        <div class="answerText">1</div>
                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">
                            <input type="radio" name="name" value="2">
                        </div>
                        <div class="answerText">2</div>
                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="3">
                        </div>

                        <div class="answerText">3</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="4">
                        </div>
                        <div class="answerText">4</div>
                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="5">

                        </div>

                        <div class="answerText">5</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">
                            <input type="radio" name="name" value="6">
                        </div>
                        <div class="answerText">No answer</div>

                    </div>
                </div>
            </div>
            </div>
            <div class="d-table-cell align-middle">
                <div class="titleMiddle">Person 3</div>
                                <div class="d-table-cell align-middle pb-4">
                <div class="horizontal">
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="1">
                        </div>
                        <div class="answerText">1</div>
                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">
                            <input type="radio" name="name" value="2">
                        </div>
                        <div class="answerText">2</div>
                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="3">
                        </div>

                        <div class="answerText">3</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="4">
                        </div>
                        <div class="answerText">4</div>
                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="5">

                        </div>

                        <div class="answerText">5</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">
                            <input type="radio" name="name" value="6">
                        </div>
                        <div class="answerText">No answer</div>

                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>

或者为每个人使用一个 class="d-table-row" 的答案如下：

<div class="col-md-12 col-xs-12">
    <div class="d-table">
        <div class="d-table-row">
            <div class="d-table-cell align-middle">This is a very nice question</div>
            <div class="d-table-cell align-middle">
                <div class="titleMiddle">Person 1</div>
                    <div class="d-table-cell align-middle pb-4">
                    <div class="horizontal">
                        <div class="answer answerRight">
                            <div class="answerInput">

                            <input type="radio" name="name" value="1">
                        </div>
                        <div class="answerText">1</div>
                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">
                            <input type="radio" name="name" value="2">
                        </div>
                        <div class="answerText">2</div>
                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="3">
                        </div>

                        <div class="answerText">3</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="4">
                        </div>
                        <div class="answerText">4</div>
                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">

                            <input type="radio" name="name" value="5">

                        </div>

                        <div class="answerText">5</div>

                    </div>
                    <div class="answer answerRight">
                        <div class="answerInput">
                            <input type="radio" name="name" value="6">
                        </div>
                        <div class="answerText">No answer</div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我不确定关闭 div 的数量是否正确，但这个版本会将每个人放在他们的行中（在桌面和移动设备上）。

【讨论】：

【解决方案2】：

像这样在不同的div中制作不同的人

.d-flex{
    display: flex;
}
.row{
    flex-direction: row;
}
.col{
    flex-direction: column;
}

<div class="d-flex row">
    <div class="d-flex col">
        <div>Person 1</div>
        <div class=" d-flex row">
            <span>Q1</span>
            <div>
                <input type="radio" name="q1" value="1" >
                <span >1</span>
            </div>
            <div>
                <input type="radio" name="q2" value="2">
                <span >2</span>
            </div>
            <div>
                <input type="radio" name="q3" value="3">
                <span >3</span>
            </div>
        </div>
    </div>
    <div class="d-flex col">
        <div>Person 1</div>
        <div class=" d-flex row">
            <span>Q1</span>
            <div>
                <input type="radio" name="q1" value="1" >
                <span >1</span>
            </div>
            <div>
                <input type="radio" name="q2" value="2">
                <span >2</span>
            </div>
            <div>
                <input type="radio" name="q3" value="3">
                <span >3</span>
            </div>
        </div>
    </div>
</div>

这可能是用于响应的结构和使用媒体查询。

【讨论】：