Question

我不明白为什么这三个不同的行出现在同一条线上。不排的行通常出现在不同的行上？我甚至尝试为行和/或列设置固定的高度。

#define EGL_OPENGL_ES3_BIT_KHR 0x0040
const EGLint attribs[] = {
    EGL_RENDERABLE_TYPE, EGL_OPENGL_ES3_BIT_KHR,
    EGL_SURFACE_TYPE, EGL_WINDOW_BIT,
    EGL_BLUE_SIZE, 8,
    EGL_GREEN_SIZE, 8,
    EGL_RED_SIZE, 8,
    EGL_ALPHA_SIZE, 8,
    EGL_DEPTH_SIZE, 8,
    EGL_STENCIL_SIZE, 8,
    EGL_NONE
};
...
eglChooseConfig(display, attribs, &config, 1, &numConfigs);
...
EGLint openGLVersionRequested = 3; 
EGLint contextAttribs[] = {
    EGL_CONTEXT_CLIENT_VERSION,
    openGLVersionRequested,      // selects OpenGL ES 3.0, set to 2 to select OpenGL ES 2.0
    EGL_NONE
};
context = eglCreateContext(display, config, NULL, contextAttribs);
if (eglMakeCurrent(display, surface, surface, context) == EGL_FALSE) {
    LOGW("Unable to eglMakeCurrent");
    return -1;
}

<div class="container-fluid">
<div id="bubble">
    <div class="row">
        <div class="col-md-12">
            <h3 id="question">Question Here</h3>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <ul class="list-inline">
                <li>Disagree</li>
                <label class="disagree" id="disagree-btn" val="0"></label>
                <label class="disagree" val="0.5"></label>
                <label id="neutral" val="1"></label>
                <label class="agree" val="2"></label>
                <label class="agree" id="agree-btn" val="3"></label>
                <li>Agree</li>
            </ul>
        </div>
    </div>


    <div class="row">
        <div class="col-md-12">
            <button class="btn btn-warning" id="back-btn">Back</button>
            <button class="btn btn-primary" id="next-btn">Next</button>
        </div>
    </div>

    <br><br>

</div>

Answer 1

我不明白为什么这三行不同出现在同一条线上。

因为您的元素位于Flex容器中（#bubble具有display: flex）。

Flex容器的两个初始设置是flex-direction: row和flex-wrap: nowrap，这意味着子元素将在一行中水平对齐而不是换行。

如果您希望#bubble的孩子出现在不同的行上，可以从以下几个选项开始：

切换到flex-direction: column或
启用flex-wrap: wrap或
切换到display: block

Answer 2

你有几个问题，A）你有.list-inline＆gt; li设置显示：inline-block。这就是内联的原因。 B）我看到的另一个问题是你的ul里面只有1个li，其他一切都是标签。这可能会使它显示为内联。如果你想让标签不在li元素里面，那么把它们放在另一个li的div中，无论哪种方式，这都是正确的HTML格式。

Answer 3

您正在重复班级=＆＃34;行＆＃34;

请改为尝试：

<div class="container-fluid">
<div id="bubble">
    <div class="row">
        <div class="col-md-12">
            <h3 id="question">Question Here</h3>
        </div>
        <div class="col-md-12">
            <ul class="list-inline">
                <li>Disagree</li>
                <label class="disagree" id="disagree-btn" val="0"></label>
                <label class="disagree" val="0.5"></label>
                <label id="neutral" val="1"></label>
                <label class="agree" val="2"></label>
                <label class="agree" id="agree-btn" val="3"></label>
                <li>Agree</li>
            </ul>
        </div>
        <div class="col-md-12">
            <button class="btn btn-warning" id="back-btn">Back</button>
            <button class="btn btn-primary" id="next-btn">Next</button>
        </div>
    </div>

    <br><br>

</div>

为什么这些行出现在同一行？（引导）

3 个答案:

为什么这些行出现在同一行？ （引导）

3 个答案:

为什么这些行出现在同一行？（引导）