居中并在Boostrap 4中放置较大的文本区域

时间：2018-07-22 20:26:44

标签： html css web bootstrap-4

我正在使用Bootstrap 4并遇到一些问题：

  1. 将输入字段居中（内联）
    2. 这些输入之间的
  2. 空格
  3. 在输入字段下添加一个较大的文本区域

这是当前的样子：

enter image description here

这是我的HTML代码： 

body {
  background: url(https://images.pexels.com/photos/50631/pexels-photo-50631.jpeg?cs=srgb&dl=aerial-bridge-buildings-50631.jpg&fm=jpg);
  background-size: cover;
  background-position: center;
  font-family: Lato;
  color: white;
}

html {
  height: 100%;
}

#content {
  text-align: center;
  padding-top: 25%;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

h1 {
  font-weight: 700;
  font-size: 5em;
}

hr {
  width: 400px;
  border-top: 1px solid #f8f8f8;
  border-bottom: 1px solidrgba(0, 0, 0, 0.2);
}

input.transparent-input {
  background-color: transparent;
  border: 2px solid white;
}

.form-control::placeholder {
  color: white;
}


/* Chrome, Firefox, Opera*/

 :-ms-input-placeholder.form-control {
  color: white;
}


/* Internet Explorer*/

.form-control::-ms-input-placeholder {
  color: white;
}


/* Microsoft Edge */

.no-padding {
  padding-right: 50px;
  padding-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Zenuni Company</title>
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <link rel="stylesheet" href="bootstrap.css">
  <link rel="stylesheet" href="app.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>

<body>

  <div class="container h-100">
    <div class="row h-100 justify-content-center align-items-center">
      <div class="col-12">
        <div id="content">
          <h1>Contact Page</h1>
          <h3>Contact Us</h3>
          <hr>
        </div>
        <form class="form-inline">
          <div class="form-group">
            <input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
          </div>
          <div class="form-group">
            <input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
          </div>
        </form>
        <button type="submit" class="btn btn-default">Send invitation</button>
      </div>
    </div>
  </div>

感谢您的帮助！

4 个答案:

答案 0 :(得分：0)

您可以通过两种方式进行操作。

第一个使用网格系统，它将以这种方式工作：

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

我认为更适合的第二种方法，是我在谈论响应中心时更有用。

<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

希望我能帮忙：）

答案 1 :(得分：0)

我刚刚编辑了您的代码并将其添加到jsfiddle

您的表单应像这样，以获取带有边距的中心输入：

     <form class="form-inline justify-content-center"> 
      <div class="form-group space-right">
       <input class="form-control transparent-input" type="text" name="name" placeholder="Name"  required>
      </div>
      <div class="form-group space-right">
       <input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname"  required>                   
      </div>         
        <button type="submit" class="btn btn-default  my-2 my-sm-0">Send invitation</button>             
     </form>

使用这行CSS：

    .space-right {margin-right:10px;}

答案 2 :(得分：0)

您无需在行中使用justify-content-center，因为col-12占据了整行。

在表单内使用两个form-inline类，而不是form-row-一个用于两个输入，另一个用于按钮。如果您希望它们在各种设备上并排放置，请对每个输入使用col。否则，请像平常一样使用col-*类，例如，使用col-12 col-sm-6，以便它们占用移动设备上父设备的整个宽度，而占用其他设备上一半的宽度。然后对按钮使用col类。

  

您还可以将.row替换为.form-row，这是我们标准网格行的一种变体，它覆盖了默认的列装订线，以实现更紧凑，更紧凑的布局。 -Bootstrap-4

仅限制表单的宽度。为此，请使用定制的CSS。如果这样做，请对表单使用mx-auto，以使其在容器内水平居中。

您是否希望按钮位于其父级的中央，请使用text-center作为其父级。

https://codepen.io/anon/pen/KBWXME

还有一件事，我想您已经使用align-items-center将所有内容垂直居中对齐了。如果是这样，请对h-100的所有父项使用container。否则，align-items-center将不起作用。 

body {
  background: url(https://images.pexels.com/photos/50631/pexels-photo-50631.jpeg?cs=srgb&dl=aerial-bridge-buildings-50631.jpg&fm=jpg);
  background-size: cover;
  background-position: center;
  font-family: Lato;
  color: white;
}

html,
body {
  height: 100%;
}

#content {
  text-align: center;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

h1 {
  font-weight: 700;
  font-size: 5em;
}

hr {
  width: 400px;
  border-top: 1px solid #f8f8f8;
  border-bottom: 1px solidrgba(0, 0, 0, 0.2);
}

input.transparent-input {
  background-color: transparent;
  border: 2px solid white;
}

.form-control::placeholder {
  color: white;
}


/* Chrome, Firefox, Opera*/

:-ms-input-placeholder.form-control {
  color: white;
}


/* Internet Explorer*/

.form-control::-ms-input-placeholder {
  color: white;
}



.mw-500px {
  max-width: 500px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.css" rel="stylesheet" />
<div class="container h-100">
  <div class="row h-100 align-items-center">
    <div class="col">
      <div id="content">
        <h1>Contact Page</h1>
        <h3>Contact Us</h3>
        <hr>
      </div>
      <form class="mw-500px mx-auto">
        <div class="form-row">
          <div class="col-12 col-sm-6 form-group">
            <input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
          </div>
          <div class="col form-group">
            <input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
          </div>
        </div>
        <div class="form-row ">
          <div class="col-12 col-sm-6 form-group">
            <button type="submit" class="btn btn-default">
              Send invitation</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

答案 3 :(得分：-1)

  1. 您的输入字段不在中心，因为它们不属于#content元素。如果将第一个</div>标签移到“提交”按钮下方<div id="content">之后，则可以解决该问题。

  2. 根据输入字段之间的间隔，我不确定您要查找的是什么。您可以只使用</br>标记来形成一个空格，但这可能有点难看。我建议您进入CSS代码，选择.form-inline并弄乱填充，直到对外观满意为止

  3. 我不完全知道您要做什么，如果您对要考虑的内容进行了草绘，也许可以帮上忙。

希望这很有用！

相关问题
最新问题