Question

我开始学习更少的bootstrap，我不能让我的示例项目工作。

我的项目文件夹包含bootstrap-3.3.4一个html和一个css，我只是想为垂直对齐元素创建一个类。我的HTML：

<html>
<head>
   <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
      <!-- Bootstrap -->
      <link href="bootstrap-3.3.4/dist/css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" type="text/css" href="css.css" media="screen" />

      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media 
         queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page 
         via file:// -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
            html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
            respond.min.js"></script>
      <![endif]-->  
</head>
<body>
    <div class='foo'><p>hello world</p></div>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-3.3.4/dist/js/bootstrap.min.js"></script>
</body>
</html>

我的css：

.vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.foo{
    height: 500px;
    width: 100px;
    background-color: red;
}

.foo p{
    .vertical-align;
}

如果我将代码放在.vertical-align中并将其放在.foo p中，它就会按预期运行。我忘了什么吗？。

试图制作bootstrap +减少项目工作

0 个答案: