Нужна помощь в создании этой модели

Question

модель У меня есть задание, я сделал это правильно с 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 - это фреймворк, имеющий собственные функции, форматирование и стилизацию.Похоже, это переопределяет ваш макет.Вы должны использовать их соответствующие классы, чтобы вызывать элементы, чтобы это работало.Если вы хотите настроить его дальше, ваш собственный CSS будет работать после объявления Bootstrap.Есть сайты с песочницей Bootstrap, если вы хотите провести быстрые тесты.https://www.bootply.com/new Удачи!

Answer 2

Первое, что я думаю, почему вы добавили Bootstrap CDN после того, как написали свой код?Вы всегда должны сначала реализовать свои фреймворки.

Ваша проблема связана с написанием кода с использованием flex и CSS.Я полагаю, что это в основном ищет ключевые слова начальной загрузки.Bootstrap использует свой собственный набор ключевых слов для стилизации в HTML и CSS.Я надеюсь, что это помогло немного объяснить вашу проблему.

Эта ссылка должна помочь решить ваши проблемы с размещением.http://getbootstrap.com/docs/4.1/layout/grid/