Question

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之前，一切工作正常添加引导程序后，徽标就会上升，而提交按钮会下降

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

Answer 1

我想第一件事是为什么在编写代码后为什么要添加Bootstrap CDN？您应该始终首先实现自己的框架。

您的问题源自使用flex和CSS编写代码。我相信它基本上是在寻找引导关键字。 Bootstrap使用自己的一组关键字在HTML和CSS中进行样式设置。我希望这可以帮助您稍微解释一下问题。

此链接应有助于解决您的展示位置问题。 http://getbootstrap.com/docs/4.1/layout/grid/

Answer 2

Bootstrap是一个框架，具有自己的功能，格式和样式。听起来好像覆盖了您的布局。您必须使用其适当的类来调出元素以使其工作。如果要进一步自定义它，则自定义CSS将在声明Bootstrap之后使用。如果您想进行一些快速测试，则可以使用Bootstrap沙箱站点。 https://www.bootply.com/new祝你好运！

在制作此模型时需要帮助

2 个答案: