Нужна помощь в создании адаптивного шаблона - PullRequest
Новая
       58

Нужна помощь в создании адаптивного шаблона

0 голосов
/ 11 ноября 2019

Я пытаюсь создать адаптивную сетку, но у меня ничего не получилось.

Я новичок в начальной загрузке и не очень хорош в Front-end.

Я пробовал некоторые коды, ноэтот самый близкий к моим потребностям. 

    <div><p>MY TEXT HERE -------------------------</p></div>
    <div>

                <div id="containerTest" class="container-fluid" style="margin-left: 0px;">
      <div class="row">
        <div class="col-sm-3" style="background-color:red;" >AAAA</div>
        <div class="col-sm-6" style="background-color:lavenderblush;">BBBBB</div>
        <div class="col-sm-3" style="background-color:lavender;">
            <button class="button button2">OK</button></div>
      </div>
    </div>

enter image description here

Ответы [ 2 ]

1 голос
/ 11 ноября 2019

С этим кодом Bootstrap 4 макет выглядит как ваш рисунок. 

<div class="container">
  <div class="row">
    <div class="col-12">
      <p>My text here</p>
    </div>
  </div>
  <div class="row">
    <div class="col-3 col-md-2 pt-2 pr-0">
      <label>Input label</label>
    </div>
    <div class="col-6 col-md-2 pr-0">
      <input type="text" class="form-control w-100">
    </div>
    <div class="col-3 d-md-none">
      <button type="button" class="btn btn-success">Save</button>
    </div>
    <div class="col-12 col-md-3">
      <input type="text" class="form-control w-100">
    </div>
    <div class="col-12 col-md-3 d-none d-md-flex pl-0">
      <button type="button" class="btn btn-success">Save</button>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <p>Other elements here</p>
    </div>
  </div>
</div>
0 голосов
/ 11 ноября 2019

Это должно сделать это. 

<div class="container">
<div class="row">
    <div class="col-sm-12">My text here ------------------</div>
</div>
<div class="row">
    <div class="col-md-3 col-sm-4">Input Label</div>
    <div class="col-md-3 col-sm-4">Input</div>
    <div class="col-md-3 hidden-sm">Input</div>
    <div class="col-md-3">Save button</div>
</div>
<div class="row visible-sm">
    <div class="col-sm-12">
        <div class="col-md-3">Input</div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">Text Area here</div>
</div>
</div>
...