model 我有一个作业,我用HTML和CSS正确完成了,但是一旦我添加了引导程序的CDN,事情就会改变 代码在这里
header,
.extra-data {
display: flex;
flex-direction: row;
}
header .profile-thumbnail {
width: 140px;
height: 80px;
border-radius: 4px;
}
header .profile-name {
display: flex;
flex-direction: column;
margin-left: 0px;
}
header .follow-btn {
display: flex;
margin: 0 0 0 auto;
}
header .follow-btn button {
border: 0;
border-radius: 10px;
padding: 5px;
}
header .follow-btn button:hover {
background-color: #9C2E9F;
}
header h3,
header h4 {
display: flex;
margin: 0;
}
#inner p {
margin-bottom: 10px;
font-size: 20px;
}
#inner hr {
margin: 20px 0;
border-style: solid;
opacity: 0.1;
}
.extra-data .stats {
display: flex;
font-size: 15px;
}
.extra-data .stats strong {
font-size: 18px;
}
.extra-data .stats .likes {
margin-left: 10px;
opacity: 0.8;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<header>
<img src="https://github.com/abhitnc/HTML-CSS-Assignment/blob/master/images/Deloitte-Logo.png?raw=true" alt="Quincy Larson's profile picture" class="profile-thumbnail" height="80" width="145">
<div class="profile-name">
<h3>MANAGER, MARKETING BUSINESS STRATEGY</h3>
<h4><span>Choice Hotels</span> | <span>Rockville, MD</span></h4>
<p>Markting Strategy, SPSS, Sales & Distribution , Market Sizing</p>
</div>
<div class="follow-btn">
<button>Submit</button>
</div>
</header>
<hr>
<div class="extra-data">
<div class="stats">
<div class="posted-date">
<strong><i class="fa fa-clock-o"></i></strong> 2 days ago
</div>
<div class="experience">
<strong><i class="fa fa-briefcase"></i></strong> 0-2 years
</div>
<div class="category">
<strong><i class="fa fa-file-text"></i></strong> Project Management
</div>
<div class="jobstatus">
<strong><i class="fa fa-black-tie"></i></strong> Full-time
</div>
<div class="visa">
<strong><i class="fa fa-flag-checkered"></i></strong> H-1B
</div>
</div>
</div>
</div>
在执行引导程序的CND之前,一切工作正常 添加引导程序后,徽标就会上升,而提交按钮会下降
我还想让鼠标悬停的文字与模型图像中的文字相同 当用户将鼠标悬停在其上时,整个框/模型会弹出 按钮的背景色应更改 如果可能的话,请提供美国国旗图标
答案 0 :(得分:1)
我想第一件事是为什么在编写代码后为什么要添加Bootstrap CDN? 您应该始终首先实现自己的框架。
您的问题源自使用flex和CSS编写代码。我相信它基本上是在寻找引导关键字。 Bootstrap使用自己的一组关键字在HTML和CSS中进行样式设置。我希望这可以帮助您稍微解释一下问题。
此链接应有助于解决您的展示位置问题。 http://getbootstrap.com/docs/4.1/layout/grid/
答案 1 :(得分:0)
Bootstrap是一个框架,具有自己的功能,格式和样式。听起来好像覆盖了您的布局。您必须使用其适当的类来调出元素以使其工作。如果要进一步自定义它,则自定义CSS将在声明Bootstrap之后使用。如果您想进行一些快速测试,则可以使用Bootstrap沙箱站点。 https://www.bootply.com/new祝你好运!