Почему меня увольняют колонны? Bootstrap и CSS

Я создаю веб сайт для компании в этом соединении. Однако каждый квадрат увольняется, если они вводят имя свойства в компьютер с более чем 2 строками.

Я попробовал решать это с одним white-space:nowrap и они расположились, но очевидно это не правильное, потому что слова сдерживаются.

6
задан 13.07.2017, 21:12
5 ответов

Элементы показывают себе таким образом (видеть полную страницу):

    .propertyItem {
         box-shadow: 1px 1px 5px black;
         margin-bottom: 50px;
         border-radius: 5px;
    }

    .propertyItem h4 {
         font-weight: bolder;
         text-align: center;
         padding: 5px 10px;
         margin-bottom: 0;
         font-size: 1em;
    }
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

      <section class="container-fluid">
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <div class="row">

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>Columna 1 con texto extenso que abarca múltiples líneas</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 2</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 3</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 4</h4>
                  </div>
                </div>



                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 1</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 2</h4>
                  </div>
                </div>

              </div>

            </div>
          </div>
        </div>
      </section>

Проблема состоит в том, что ты размещаешь все элементы в той же линии, это способствует тому, чтобы Bootstrap разметил их, как это ему было уместно. Для того, чтобы они упорствовали в Вашей колонне, ты можешь создавать линию для каждой группы, пример:

.propertyItem {
         box-shadow: 1px 1px 5px black;
         margin-bottom: 50px;
         border-radius: 5px;
    }

    .propertyItem h4 {
         font-weight: bolder;
         text-align: center;
         padding: 5px 10px;
         margin-bottom: 0;
         font-size: 1em;
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

      <section class="container-fluid">
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <div class="row">

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>Columna 1 con texto extenso que abarca múltiples líneas</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 2</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 3</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 4</h4>
                  </div>
                </div>
                
              </div>

              <div class="row">

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 1</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 2</h4>
                  </div>
                </div>

              </div>
              
            </div>
          </div>
        </div>
      </section>
2
ответ дан 24.11.2019, 13:40
  • 1
    #161; Привет! Я думаю, что у тебя есть raz и # 243; n. Однако, не, поскольку приносить это закончилось, так как я делаю цикл while в PHP. и #191; у Тебя какая-то идея есть? – Hoose 10.08.2016, 19:29
  • 2
    Ты можешь в и # 241; adir счетчик в цикле, ты добавляешь <div class="row">, когда его 0, и когда он прибудет к 3, добавляешь </div> и это возвращаешь в 0. – Diego Torres 10.08.2016, 19:51

ВїHas, протестированный герметизировать в корпусе группы 4 свойств внутри .row?

А именно...

<div class="row">
    <div class="propiedad">...</div>
    <div class="propiedad">...</div>
    <div class="propiedad">...</div>
    <div class="propiedad">...</div>
</div>

<div class="row">
    <div class="propiedad">...</div>
    <div class="propiedad">...</div>
    <div class="propiedad">...</div>
    <div class="propiedad">...</div>
</div>
2
ответ дан 24.11.2019, 13:40
  • 1
    с этим он не решается, произошел со мной несколько раз @sergio –  10.08.2016, 12:18
  • 2
    #161; Привет! Я думаю, что у тебя есть raz и # 243; n. Однако, не, поскольку приносить это закончилось, так как я делаю цикл while в PHP. и #191; у Тебя какая-то идея есть? – Hoose 10.08.2016, 19:29
  • 3
    Я har и # 237; в небольшое количество м и # 225; s или меньше схвати и # 237;: $counter = 0; foreach($item in $collection){ if($counter == 0){ echo "<div class='row'>"; } echo '<div class="propiedad">'; echo "....."; echo "</div>"; if($counter == 0){ echo "</div>"; } if($counter == 3){ $counter = 0; } $counter ++; } (Disulpa способ появляться c и # 243; я говорю, но не использоваться хорошо markdown) –  11.08.2016, 12:28

Это очень важно, чтобы использовать Bootstrap иметь просвет, как функционирует grid.

В grid Bootstrap единица средства - "Колонны" будучи общим количеством 12 то, что формирует линию, я помещаю тебе примеры:

Пример 1:

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>

Пример 2:

<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8"></div>
    <div class="col-md-2"></div>
</div>

Пример 3:

<div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
</div>

Поскольку ты видишь все линии, они сформированы 12 колоннами. Если ты это не выполнишь, колонны уволят тебя, потому что у них есть пустота, чтобы это делать, и потому что они не хорошо объявлены внутри линии (row)

Брось глаз в официальную документацию для системы grid Bootstrap http://getbootstrap.com/css/#grid-example-basic

2
ответ дан 24.11.2019, 13:40

Протестируй свойство, которое называются text-overflow: ellipsis; вместе с overflow: hidden;.

<div>
  <h3>Sin <code>text-overflow: ellipsis</code></h3>
    <p style="max-width: 250px; white-space: nowrap; overflow: hidden;">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

<hr>

<div>
  <h3>Con <code>text-overflow: ellipsis</code></h3>
    <p  style="max-width: 250px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>
1
ответ дан 24.11.2019, 13:40

Потому что ты не тестируешь использовать книжный магазин masonry, что он делает, состоит в том, чтобы группировать все ящики без того, чтобы были разрывы с одной до другой из-за высоты

оставил Тебе пример и ссылку в книжный магазин: http://masonry.desandro.com/

<div class="row">
  <div class="col-lg-4">...</div>
  <div class="col-lg-4">...</div>
  <div class="col-lg-4">...</div>
  ...
</div>
<script src="/path/to/masonry.pkgd.min.js"></script>
$('.row').masonry({
  // options
  itemSelector: '.col-lg-4'
});

А tmbiГ©n то, что ты можешь делать, aГ±adir один min-height в ящики

Надеялся, что он подает тебе

1
ответ дан 24.11.2019, 13:40