Не помещайте этикетку в строку в форме - Bootstrap

Question

У меня есть форма, у меня есть в этих двух полях встроенные, потому что они находятся в div формы, встроенного в форму, я хочу поставить метку над полями, а не рядом с ними. Как удалить из них встроенную форму, не затрагивая поля?

Вот кодовая ручка

<main id="contact_part">
    <article class="mb-5 row">
        <h1>Nous Contacter</h1>
        <div class="col-md-12">
            <form action="" method="post" id="contact_form">
                <div class="form-inline">
                    <label class="" for="name_contact">Name</label>
                    <input type="text" class="form-control mb-2 mr-sm-2" id="name_contact" placeholder="Nom" required>

                    <label class="" for="lastNameContact">Name</label>
                    <input type="text" class="form-control mb-2 mr-sm-2" id="lastName_contact" placeholder="Prénom" required>
                </div>
                <div class="form-group">
                    <label class="" for="email_contact">E-Mail</label>
                    <input type="email" name="email_contact" id="email_contact" class="form-control" placeholder="E-Mail" required>
                </div>
                <div class="form-group">
                    <label class="" for="message_contact">Message</label>
                    <textarea class="form-control" id="message_contact" placeholder="Message" required></textarea>
                </div>
            </form>
        </div>
    </article>
</main>

#contact_part article {
    background-color: #FFF989;
    font-family: main, "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #565656;
    padding: 50px;
}

#contact_part .row {
    display: block;
}

#contact_part h1 {
    font-size: 1.7rem;
    text-transform: uppercase;
    margin-bottom: 3rem;
    text-decoration: underline;
    text-align: center;
}

#contact_form {
    width: 50%;
    margin: 0 auto;
}

#contact_form .form-inline label {

}

#contact_form input, #contact_form textarea {
    border: none;
    border-bottom: 1px solid #C6C6C6;
    background-color: #FFF989;
}

Answer 1

Если я правильно понимаю, вам не нужно использовать form-inline class вместо этого, как показано ниже. Ваша форма будет хорошо выглядеть.

<main id="contact_part">
    <div class="container">
        <article class="mb-5 row">
            <div class="col-12">
                <h1>Nous Contacter</h1>
            </div>
            <div class="col-12">
                <form action="" method="post" id="contact_form">
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label class="custom-control pl-0" for="name_contact">First Name</label>
                                <input type="text" class="form-control" id="name_contact" placeholder="First Name" required>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group">
                                <label class="custom-control pl-0" for="lastNameContact">Last Name</label>
                                <input type="text" class="form-control" id="lastName_contact" placeholder="Last Name" required>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label class="custom-control pl-0" for="email_contact">E-Mail</label>
                                <input type="email" name="email_contact" id="email_contact" class="form-control" placeholder="example@example.com" required>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label class="custom-control pl-0" for="message_contact">Message</label>
                                <textarea class="form-control" id="message_contact" placeholder="Message" rows="5" required></textarea>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </article>
    </div>
</main>

Code Pen .

Используйте col-12 вместо col-md-12 class для повышения производительности. Не используйте row без container или container-fluid. Если вы используете только row, это даст вам horizontal scroll bar. Ваш code будет выглядеть следующим образом.

<div class="container">
    <div class="row">
        <div class="col-12"></div>
    </div>
</div>

Или

<div class="container-fluid">
    <div class="row">
        <div class="container">
            <div class="row">
                <div class="col-12"></div>
            </div>
        </div>
    </div>
</div>

Просмотр жидкости или 100% ширина браузера

<div class="container-fluid">
    <div class="row">
        <div class="col-12">Content</div>
        <div class="col-12">Content</div>
        <div class="col-12">Content</div>
        <div class="col-12">Content</div>
    </div>
</div>

Надеюсь, эта помощь!

Answer 2

Здесь вы go, дайте мне знать, если это работает: https://codepen.io/luke-richter/pen/XWJVqWO

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

#contact_part{
    background-color: #FFF989;
    font-family: main, "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #565656;
    padding: 50px;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<!------ Include the above in your HEAD tag ---------->


<main id="contact_part">
<div class="container ">
<div class="row">
<h2>Inline form with heading above inputs</h2>
</div>
<form action="#">
<div class="row">
<div class="col-md-3">
<div class="form-group form-group-sm">
<label for="firstname" class="control-label">Firstname1</label>
<input type="text" class="form-control" id="firstname" placeholder="Firstname">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="lastname" class="control-label">Last Name2</label>
<input type="text" class="form-control" id="lastname" placeholder="Last Name">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="lastname" class="control-label">Last Name3</label>
<input type="text" class="form-control" id="lastname" placeholder="Last Name">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<textarea class="form-control"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-3"><br>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>

Answer 3

Попробуйте,

.form-inline label
{
margin-bottom:3em;
}

Или Вы можете переместить метку за пределы <div class="form-inline">