Я использую текстовый редактор Brackets, и все отлично работает (через Brackets работает так же, как и с Codepen), за исключением одного:
Я использую медиа-запрос CSS для установки точки останова, поэтому у меня есть только один столбец с максимальной шириной 537 пикселей.
@media (max-width: 537px) {
.custom-column {
width: 100%;
}
}
<div class="col-sm-4 col-xs-6 custom-column">
<img src="#" alt="#" width="100%">
<p>Me</p>
</div>
По какой-то причине это работает в Codepen, но не когда я запускаю текстовый редактор в Chrome. Может быть, это как-то связано с моим элементом «голова»?
<!DOCTYPE html="en">
<html lang>
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Icons for footer -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
и вот codepen: [http://codepen.io/SimmoSim/pen/wJgpwg?editors=1100][1]
