时间戳

首页 > 解决方案 > 将标题与卡片对齐

css - 将标题与卡片对齐

问题描述

我在 Bootstrap 4 中将简单标题与卡片对齐时遇到问题： 在此处输入图像描述

我想让文本从卡片左侧开始的同一个地方开始。我试图将文本放入表单、卡片内，但这些都不起作用。

这是实际的代码：

<div>
  <div class="search-panel">
    <div style="max-width:960px; padding-top: 75px" class="row">
      <div>
        <h1 style="color: white">
          Find unique work and</br>
          forget about boring recruitment
        </h1>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="card col-8">
        <div class="card-body">
          <form>
            <div class="form-row mb-2">
              <div class="form-group col">
                <label for="inputEmail4">Job Category</label>
                <select style="width:100%" class="form-control">
                  <option>Backend developer</option>
                  <option>Frontend developer</option>
                </select>
              </div>
              <div class="form-group col">
                <label for="inputEmail4">Technology</label>
                <select style="width:100%" class="form-control">
                  <option>Javascript</option>
                  <option>C++</option>
                  <option>more to come</option>
                </select>
              </div>
              <div class="form-group col">
                <label for="inputEmail4">Location</label>
                <select style="width:100%" class="form-control">
                  <option>Milan</option>
                  <option>London</option>
                </select>
              </div>
              <button class="btn btn-info float-right mt-3 mb-3">1,315 results</button>
            </div><small class="float-left">
              <router-link to="/refinesearch">Refine search</router-link></small>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

我敢打赌，有一些简单的解决方案，但很难找到。

标签： csstwitter-bootstrapbootstrap-4

解决方案

这样的事情应该可以正常工作：

body, html {
	background-color: #e3e3e3;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<style>
body {
	background-color: #e3e3e3;
}

</style>

<body>
<div class="row justify-content-center">
  <div class="col-8 title p-0">
    <h1 style="color: white"> Find unique work and<br/>
      forget about boring recruitment </h1>
  </div>
</div>
<div class="search-panel">
  <div class="row justify-content-center">
    <div class="card col-8">
      <div class="card-body">
        <form>
          <div class="form-row mb-2">
            <div class="form-group col">
              <label for="inputEmail4">Job Category</label>
              <select style="width:100%" class="form-control">
                <option>Backend developer</option>
                <option>Frontend developer</option>
              </select>
            </div>
            <div class="form-group col">
              <label for="inputEmail4">Technology</label>
              <select style="width:100%" class="form-control">
                <option>Javascript</option>
                <option>C++</option>
                <option>more to come</option>
              </select>
            </div>
            <div class="form-group col">
              <label for="inputEmail4">Location</label>
              <select style="width:100%" class="form-control">
                <option>Milan</option>
                <option>London</option>
              </select>
            </div>
            <button class="btn btn-info float-right mt-3 mb-3">1,315 results</button>
          </div>
          <small class="float-left">
          <router-link to="/refinesearch">Refine search</router-link>
          </small>
        </form>
      </div>
    </div>
  </div>
</div>
</body>
</html>

推荐阅读