Почему не работает Bootstrap 3 сетка без bootstrap. css?

tigrus2014 · December 20, 2017

Приветствую! В общем суть вопроса такова... Для того чтобы избавится от длинного css кода в Bootstrap (знаю можно сжимать файл, можно использовать только сетку, это всё не то) из файла bootstrap.css была взята часть кода для галереи таким образом, один только класс col-md-4, container и row. Все классы переписаны в другой css файл.

<body>
    <div class="container">
	<div class="row">
	<div class="col-md-4">Content columns</div>
	<div class="col-md-4">Content columns</div>
	<div class="col-md-4">Content columns</div>
	</div>
	</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>
  </body>

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;

}


@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.row {
  margin-right: -15px;
  margin-left: -15px;

}

 .col-md-4 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
   float: left;
  width: 33.33333333%;
}


@media (min-width: 992px) {
  .col-md-4 {
    float: left;
  }
  
  .col-md-4 {
    width: 33.33333333%;
  }
}

.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.row:before,
.row:after {
  display: table;
  content: " ";
}

.clearfix:after,
.container:after,
.row:after {
  clear: both;
}

Дальше пойдет мой код. Отключаю Bootstrap.css и всё падает. Вопрос почему?

Edited December 20, 2017 by tigrus2014

AlexZaw · December 21, 2017

У вас паддинги не учитываются, добавьте box-sizing:border-box для col-md-4

Sign In

Почему не работает Bootstrap 3 сетка без bootstrap. css?

Question

tigrus2014

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

AlexZaw

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information