3

Почему моя сетка (.row со всеми .col-md) выходит за границы родительского контейнера?

.mixer {
  width: 1024px;
  height: 200px;
  border: 3px solid #6B70F0;
  margin: 0 auto;
  border-radius: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="mixer">
  <div class="container">
    <div class="row">
      <div class="col-md-10">
        <p>Настройте и скачайте свою минусовку:</p>
      </div>
      <div class="col-md-2">
        <button class="playbtn"></button>
      </div>
    </div>
  </div>
</div>

3
  • Оформил ваш код так, чтобы его можно было выполнить и посмотреть результат. Добавьте в него ваши стили. Без них мы не увидим вашей проблемы. 3 янв 2017 в 7:01
  • пока только один стиль, для родительского контейнера. Добавил
    – PolonskiyP
    3 янв 2017 в 7:11
  • @PolonskiyP Добавил ответ, вы так хотите? 3 янв 2017 в 7:18

3 ответа 3

1

так все работает

.container
{
  background: red; 
  width: 1019px;
  margin-right: auto;
  margin-left: auto;
}
1

Вы сделали два вложенных контейнера. У блока с классом .mixer ширина фиксирована, а у блока с классом .container – зависит от ширины экрана.

Поэтому на узком экране блок с классом .mixer выходит за границу экрана. А на экранах шириной от 1200px блок с классом .container оказывается шире, чем блок с классом .mixer и выходит за его границу.

Исправлять можно разными способами – в зависимости от вашей задачи. Например, можно добавить обоим контейнерам ограничение по ширине:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.container, 
.mixer {
  max-width: 100%;
}
.mixer {
  width: 1024px;
  height: 200px;
  border: 3px solid #6B70F0;
  margin: 0 auto;
  border-radius: 5px;
}
<div class="container mixer">
  <div class="row">
    <div class="col-md-10">
      <p>Настройте и скачайте свою минусовку:</p>
    </div>
    <div class="col-md-2">
      <button class="playbtn"></button>
    </div>
  </div>
</div>

Но мне кажется, что код станет понятнее, если оформить класс .mixer как модификатор класса .container. А 1024px задать как max-width.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.container.mixer {
  max-width: 1024px;
  height: 200px;
  border: 3px solid #6B70F0;
  margin: 0 auto;
  border-radius: 5px;
}
<div class="container mixer">
  <div class="row">
    <div class="col-md-10">
      <p>Настройте и скачайте свою минусовку:</p>
    </div>
    <div class="col-md-2">
      <button class="playbtn"></button>
    </div>
  </div>
</div>

0

Дело в том, что разметка использующая float не гарантирует нахождение элементов на одной строке, поэтому используйте flexbox. Добавьте осмысленный класс (подходящий семантически) для .row, к примеру, music-container и добавьте ему display: flex;. Чтобы кнопка была справа, можно просто её контейнеру присвоить margin-left: auto;.

Готовый пример:

.mixer {
  width: 1024px;
  height: 200px;
  border: 3px solid #6B70F0;
  margin: 0 auto;
  border-radius: 5px;
}

.music-container {
  display: flex;
  width: 100%;
}

.playbtn-container {
  margin-left: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="mixer">
  <div class="container">
    <div class="row music-container">
      <div class="col-md-10">
        <p>Настройте и скачайте свою минусовку:</p>
      </div>
      <div class="col-md-2 playbtn-container">
        <button class="playbtn"></button>
      </div>
    </div>
  </div>
</div>

5
  • В вашем исправлении не работают col-md-10 и col-md-2. Проинспектируйте. Ведь row значительно шире!
    – PolonskiyP
    3 янв 2017 в 7:24
  • Это даже невооруженным глазом видно. Button должен быть значительно правее
    – PolonskiyP
    3 янв 2017 в 7:25
  • @PolonskiyP Это что-то с bootstrap. Почему-то я не вижу чтобы у стилей col-md-10, col-md-2 была ширина в процентах. 3 янв 2017 в 7:51
  • @PolonskiyP Добавил решение, которое не зависит от boostrap (но ему не противоречит). 3 янв 2017 в 7:54
  • @VadimOvchinnikov Поищите col-md-10 и col-md-2 в maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css 3 янв 2017 в 7:57

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.