使用 Bootstrap 4 的联系页面答案

【问题标题】：Contact page using Bootstrap 4使用 Bootstrap 4 的联系页面
【发布时间】：2018-06-07 09:04:30
【问题描述】：

我是一名前端开发学生，目前我的一个练习存在以下问题：

我正在尝试构建一个联系页面，如picture 所示，仅使用 Bootstrap 4 的组件。

问题是我无法将“信息”列放在表单的左侧。

你对我做错了什么或我应该做什么有任何暗示吗？在此先感谢您的帮助

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
}

header {
    height: 70px;
    background-color: rgb(4, 136, 96);
    margin-bottom: 30px;
}

.intro {
    margin-bottom: 40px;
    text-align: center;
    color: rgb(35, 35, 35);
}

main {
    padding: 20px;
}

.btn {
    background-color: rgb(4, 136, 96);
    color: whitesmoke;
}

.footer {
    background-color: rgb(35, 35, 35);
    width: 100%;
    height: 100px;
    position: fixed;
    bottom: 0;
}

.footer p {
    color: whitesmoke;
    text-align: center;
    height: 100%;
    padding: 40px;
}

.arrow-footer {
    position: fixed;
    background-color: rgb(4, 136, 96);
    width: 40px;
    height: 40px;
    bottom: 30px;
    right: 40px;
    font-size: 25px;
    color: whitesmoke;
    text-align: center;
}

.location {
    margin-left: 14px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Lesson11 Hw1</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="style.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
        crossorigin="anonymous">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
        crossorigin="anonymous">
</head>

<body>

    <header></header>

    <main>
        <section class="intro">
            <h1>Contact Form</h1>
            <p>Leave your message below and we will be back to you as soon as possible.</p>
        </section>


        <form>
            <div class="row">
                <div class="row col-xs-6 col-sm-6 col-md-6 col-lg-6">
                    <div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <input type="name" class="form-control" placeholder="Name">
                    </div>
                    <div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <input type="email" class="form-control" placeholder="Email">
                    </div>
                    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <textarea class="form-control" rows="6" placeholder="Leave your message here"></textarea>
                    </div>

                </div>
            </div>
            <button type="submit" class="btn btn-md ml-auto">SUBMIT</button>
        </form>

        <div class="list-group col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <h5>INFORMATION</h5>
            <div class="address">
                <p>
                    <i class="fa fa-map-marker" aria-hidden="true"></i> Wannabe Front-end Developer</p>
                <p class="location">Ring Road</p>
                <p class="location">Sofia, Bulgaria</p>
            </div>

            <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
            <p>Etiam porta sem malesuada magna mollis euismod.</p>
            <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
            <p>Etiam porta sem malesuada ultricies vehicula.</p>
        </div>
    </main>

    <footer class="footer">
        <p>Copyright &copy; Savvina Drougouti</p>
    </footer>
    <div class="arrow-footer">
        <i class="fa fa-angle-up" aria-hidden="true"></i>
    </div>
</body>

</html>

【问题讨论】：

您使用的是引导程序，不是吗？因此，您可以使用特定于断点的列类来轻松调整布局的列大小。请参阅文档中的 details and examples。
表单和“INFORMATION”列应放在相同.row容器内。
哦，非常感谢@Alexander！这就是解决方案！

标签： html css bootstrap-4 contact-form

【解决方案1】：

那个设计很简单，看看上面的sn-p：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <title>Document</title>
</head>
<style>
    .jumbotron {
        background-color: transparent;
    }
    ul {
        list-style: none;
    }
</style>
<body>
    <nav class="navbar navbar-light bg-light">
        <span class="navbar-brand mb-0 h1">Navbar</span>
    </nav>
    <div class="container">
        <div class="jumbotron text-center">
            <h4 class="display-4">Hello, world!</h4>
            <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        </div>

        <div class="row">
            <div class="col">
                <form action="#" method="POST">
                    <div class="row">
                        <div class="col-6 form-group">
                            <input type="text" class="form-control">
                        </div>
                        <div class="col-6 form-group">
                            <input type="text" class="form-control">
                        </div>
                    </div>
                    
                    <div class="col-12">
                        <textarea name="body" id="body" class="form-control"></textarea>
                    </div>
                </form>
            </div>
            <div class="col-6">
                <h5 class="display-5 right-info-header">Information</h5>
                <ul>
                    <li>Conrad Straße 12, Berlin, Deutschland</li>
                    <li>+49 170 1111 2123</li>
                    <li>+49 170 1111 2124</li>
                    <li>info@berliner.de</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

当然，图标字体的样式和用法有很多缺失，但总体布局已经有了，现在你只需要样式一点，祝你好运。干杯。

【讨论】：

请将其标记为正确答案，这对未来的人有帮助，不用担心，在这里提供帮助：D

【解决方案2】：

我认为“旁边”是指左侧或右侧。

在这种情况下，请使用 .

<table>
    <thead>
        <th>Column Header for Data on Left</th>
        <th>Column Header for Stuff in Middle</th>
        <th>Column Header for Stuff on Right</th>
    </thead>
    <tbody>
        <tr>
            <td>Data in 1st Column, 1st Row</td>
            <td>Data in 2nd Column, 1st Row</td>
            <td>Data in 3rd Column, 3rd Row</td>
        </tr>
        <tr>
            <td>Data in 1st Column, 2nd Row</td>
            <td>Data in 2nd Column, 2nd Row</td>
            <td>Data in 3rd Column, 2nd Row</td>
        </tr>        
    </tbody>
</table>

你可以放任何你想要的东西。需要注意的重要一点是，这会设置一个包含行和列的网格。

【讨论】：

切勿将表格用于布局目的。是deprecated。
感谢您的解决方案 :) 但是，我只能使用 Bootstrap 4 组件：/ 我更新了我的问题以反映这一点。
@Alexander，感谢您指出这一点。我不知道。您的来源表明不推荐使用数据。我意识到这不是OP的情况。很高兴知道。
@BlackNina，你不能只用 Bootstrap 组件做任何事情。您需要，例如
、等。您可以使用
和并使用“float”属性。另外，查看 flex-container 和 CSS display: block、 display: inline 等。
<table> 标签只能用于表格数据（价目表、规格等）。