Столбцы неуместны при использовании строк с разным количеством столбцов - PullRequest
Новая
       5

Столбцы неуместны при использовании строк с разным количеством столбцов

0 голосов
/ 23 мая 2018

Я строю сетку из 3 строк и следующей конфигурации.

В первом столбце 3 столбца

Во втором столбце 2 столбца

В последнем столбцы: 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
   <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><asp:button /></div>
   <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><asp:button /></div>
   <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><asp:button /></div>
</div>

<div class="row">
   <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><asp:button /></div>
   <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><asp:button /></div>
</div>

<div class="row">
   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><asp:button /></div>
</div>

Проблема в том, что конец каждой строки (я имею в виду, последний столбец) не совпадает с другим ... Я попытался установить конкретное поле или /и заполнение в каждом ряду.Но проблема все еще происходит, потому что, когда я изменяю размер экрана, беспорядок снова приходит.

Есть ли элегантное или эффективное решение этой проблемы?

Спасибо, приятели.

ПРИМЕЧАНИЕ: давая вам всю дополнительную информацию, надеюсь, вы все поймете мою проблему лучше ... Внутри каждого столбца у меня разное количество элементов (например, asp: button, asp: label и т. Д.),Я использую загрузчик 3. Если вам нужна какая-либо информация, пожалуйста, дайте мне знать ... Приветствия.

1 Ответ

0 голосов
/ 23 мая 2018

Если я правильно вас понимаю, я думаю, вы пытаетесь сделать так, чтобы строка с 2 столбцами выровняла последний столбец с последним в строке с 3?Если это так, то вам нужно использовать смещение и столбцы одинакового размера.

Это то, что вы ищете? 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="row">
  <div class="col-xs-4 bg-primary">Row 1 Col 1</div>
  <div class="col-xs-4 bg-info">Row 1 Col 2</div>
  <div class="col-xs-4 bg-danger">Row 1 Col 3</div>
</div>
<div class="row">
  <div class="col-xs-6 bg-success">Row 2 Col 1</div>
  <div class="col-xs-6 bg-warning">Row 2 Col 2</div>
</div>
<div class="row">
  <div class="col-xs-12 bg-danger">Row 3 Col 3</div>
</div>
</div>

Также вы не правильно закрыли теги div на строках

...