Question

我有这个表格。我想这样直到768px宽度的形式是内联的，后面的形式应该是垂直的。我有点怀疑，如果我必须设置一个断点，或者bootstrap有一个函数可以做到这一点？就像现在一样，表格保持内联。

有人知道我该怎么做吗？

HTML

<div class="sign-up">
        <p class="sub-header">@Helpers.GetText(CurrentPage, "signupHeaderText", CurrentPage.Parent)</p>
        <form id="signupForm">
            <div class="form-group">
                <label class="sr-only" for="name">@Helpers.GetText(CurrentPage, "signupNameFieldText", CurrentPage.Parent)</label>
                <input type="text" class="form-control" placeholder="@Helpers.GetText(CurrentPage, "signupNameFieldText", CurrentPage.Parent)" id="name" name="name" required />
            </div>
            <div class="form-group">
                <label class="sr-only" for="email">@Helpers.GetText(CurrentPage, "signupEmailFieldText", CurrentPage.Parent)</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="@Helpers.GetText(CurrentPage, "signupEmailFieldText", CurrentPage.Parent)" required/>
            </div>
            <input type="text" id="Channel" name="Channel" style="display: none;" />
            <input type="text" id="Campaign" name="Campaign" style="display: none;" />
            <button type="submit" class="btn btn-default active">@Helpers.GetText(CurrentPage, "signupCtaButtonText", CurrentPage.Parent)</button>
        </form>
    </div>

SCSS：

.sign-up {
    padding: $grid-gutter-width;
    margin-bottom: $grid-gutter-width;
    border-radius: 5px;
    background-color: $white3;

    .form-control {
        box-shadow: none;
        border-color: $white4;
    }

    .error {
        border: 1px red solid;
    }

    label {
        &#name,
        &#email {
            &-error {
                display: none !important;
            }
        }
    }

    .btn {
        margin: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        border: none;
        width: 100%;
    }
}

.signup-wide {
    padding-top:15px;

    form {
        display: flex;
        justify-content: space-between;

        .form-group {
            width: 33%;
            height: 40px;
            max-width: 200px;

            input {
                height: 100%;
            }
        }

        .btn {
            padding-top: 10px;
            padding-bottom: 10px;
            height: 40px;
            width: 33%;
        }
    }
}

Answer 1

Bootsrap有这个系统类，使用<form class="form-inline">

内联形式到垂直

1 个答案: