在制作此模型时需要帮助

时间:2018-10-01 18:42:11

标签: html css flexbox

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>&nbsp;|&nbsp;<span>Rockville, MD</span></h4>
      <p>Markting Strategy, SPSS, Sales &amp; 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&nbsp;&nbsp;&nbsp;&nbsp;
      </div>
      <div class="experience">
        <strong><i class="fa fa-briefcase"></i></strong> 0-2 years&nbsp;&nbsp;&nbsp;&nbsp;
      </div>
      <div class="category">
        <strong><i class="fa fa-file-text"></i></strong> Project Management&nbsp;&nbsp;&nbsp;&nbsp;
      </div>
      <div class="jobstatus">
        <strong><i class="fa fa-black-tie"></i></strong> Full-time&nbsp;&nbsp;&nbsp;&nbsp;
      </div>
      <div class="visa">
        <strong><i class="fa fa-flag-checkered"></i></strong> H-1B
      </div>
    </div>
  </div>
</div>

在执行引导程序的CND之前,一切工作正常 添加引导程序后,徽标就会上升,而提交按钮会下降

我还想让鼠标悬停的文字与模型图像中的文字相同 当用户将鼠标悬停在其上时,整个框/模型会弹出 按钮的背景色应更改 如果可能的话,请提供美国国旗图标

2 个答案:

答案 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祝你好运!