时间戳

首页 > 解决方案 > Bootstrap 4 (Flexbox) 询问问题？

html - Bootstrap 4 (Flexbox) 询问问题？

问题描述

1-您的好人建议大家，因为我尝试了很多次都没有希望（使用 Bootstrap 4）标题部分拒绝遵循（d-flex justify-content center classes as normal!!!因为我想将饥饿的文本居中.. ....以及所有这些文本。

2-字体真棒有一个奇怪在此处输入图像描述的东西（第一次看到）..我想像那个标志一样围绕它做一个圆圈，但是在检查时我发现了 SVG？？？

@import url('https://fonts.googleapis.com/css?family=Lato|Montserrat|Roboto&display=swap');



body{
font-family: 'Lato', sans-serif;
  
}

input[type="text"]{
  display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #c0c0c0;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

header .container{
  padding: 35px 20px 0;
  max-width: 950px;
}


nav a{
  text-transform: uppercase;
}


 i{
  background-color: white;
 border-radius: 50%;
 border: 1x solid grey;
 padding:10px;
  color: red;

}

.bg-dark{
  background-color: #343a4000!important;
}

.navbar-brand{
  text-transform: capitalize;
}

.navbar-dark .navbar-brand{
  font-size: 1.5rem;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgb(255, 255, 255);
  font-size: 1rem;
}

header{
  background: url('https://images.unsplash.com/uploads/1412198485051133af17f/5049dacb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80') no-repeat center center/cover;
  min-height: 724px;
  color: #fff;
}


.showcase-text h1{
  font-size: 3rem;
}
<!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">
	<!-- Bootstrap 4  -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

  <!-- Animate CSS  -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">
	<!-- FontAwesome  -->
  <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
  <!-- Wow.js -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js">
  <!-- Hover.css Lib -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
  <link rel="stylesheet" href="css/app.css">
  <title>Cairo Eat | Best Restaurants in Egypt at your Hand</title>
</head>
<body>
<header>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href="#"><span><i class="fas fa-utensils food-icon   mr-1"></i> </span>  CairoEat</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav  ">
        <li class="nav-item ">
          <a class="nav-link" href="#">Sign Up <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Log in</a>
        </li>
      
        <li class="nav-item">
        </li>
      </ul>
  
    </div>
  </nav>
  
  <div class="container text-center d-flex flex-column justify-content-center">

   <h1>Hungry? Find the food you're looking for.</h1>
    <p>Your city's best eats, ready to be ordered online.</p>
    <input type="text" placeholder=" City or Address">
    <!-- <input type="submit" value="Search" class="btn btn-danger p-2 pl-3 pr-3"> -->
    <button type="submit" class=" btn btn-danger p-2 pl-3 pr-3">Search</button>
 

  </div>


</header>




</body>
</html>

在此处输入图像描述

标签： htmlcssbootstrap-4

解决方案

  • 对于您的第一个问题，请遵循以下答案：

正如我看到您的代码一样，第 49 行有一个错字，您在其中声明了div类

<div class="container tex-center d-flex flex-column justify-content-center">

这tex-center是不正确的，它应该是text-center。所以结果应该是这样的：

<div class="container text-center d-flex flex-column justify-content-center">
  • 对于第二个问题，您可以执行以下操作：

首先，您可以像这样向您的跨度添加一个类：

<span class="icon"><i class="fas fa-utensils food-icon"></i> </span>

并为它创建一个样式，如下所示：

span.icon {
  color: #343a40;
  background-color: white;
  border: 1px solid white;
  border-radius: 50%;
  padding: 5px;
  margin: 0 5px;
}

注意：为了更好的说明，我只是添加了一个简单class="icon"的名称，只要您不断更改样式类名称，您就可以将其命名为任何您想要的名称。

更新

为了解决您的第一个问题，您可以做几件事，按照以下说明解决问题：

  • 给标签d-flex_header

nav.navbar {
  top: 0;
  width: 100%;
}
<header class="d-flex flex-column justify-content-center position-relative">
  <nav class="navbar navbar-expand-md navbar-dark bg-dark position-absolute">
  ...
  </nav>
  ...
</header>

注意：...是为了说明你的其他项目到相对 div 中，你应该把你的其他项目而不是它们。

推荐阅读