Как я могу выровнять и изменить размер столбцов начальной загрузки? - PullRequest
Новая
       10

Как я могу выровнять и изменить размер столбцов начальной загрузки?

0 голосов
/ 19 мая 2019

Я создал макет из 4 столбцов, но первый столбец не выровнен по верху, он центрирован с остальными 3 столбцами, и я также хотел бы, чтобы столбцы начинались немного выше.

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

Вот ссылка на сайт: https://stevenarroyave.github.io/UPTAKE/home.html

вот как бы я хотел, чтобы это выглядело так: https://drive.google.com/file/d/1V3lFJk0NVuJ8yC_-s-yqs0HlZZSJwKYD/view?usp=sharing

<div class="row">
      <div class="col-3">
        <div class="card" id="filter">
                <header class="card-header">
                    <h6 class="title">Filter</h6>
                </header>
            <div class="card-body">
              <h5>Categories</h5>
              <div class="form-group">
                <select class="form-control" id="exampleFormControlSelect1">
                  <option hidden="">Select a category</option>
                  <option>Administration</option>
                  <option>Charity &amp; Voluntary</option>
                  <option>Construction</option>
                  <option>Education</option>
                  <option>Finance</option>
                  <option>Health</option>
                  <option>IT &amp; Telecoms</option>
                  <option>Media, Digital &amp; Creative</option>
                  <option>Retail</option>
                  <option>Security &amp; Safety</option>
                  <option>Training</option>
                  <option>Other</option>
                </select>
              </div><br>
              <h5>Location</h5>
              <div class="form-group">
                <input class="form-control" type="text">
              </div><br>
              <h5>Distance</h5>
              <div class="slidecontainer">
                <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
                <p><span id="demo">50</span> kms</p>
              </div><br>
              <h5>Budget</h5>
              <div class="form-group">
                <input type="text" id="name" name="name" requiredminlength="4" maxlength="8" size="5">
                <p>to</p>
                <input type="text" id="name" name="name" requiredminlength="4" maxlength="8" size="5">
              </div><br>
              <h5>Date</h5>
              <div class="form-group">
                <select class="form-control" id="exampleFormControlSelect1">
                  <option hidden="">Select a date</option>
                  <option>Last 24hrs</option>
                  <option>Last week</option>
                  <option>Last month</option>
                  <option>Last 3 months</option>
                  <option>Last 6 months</option>
                  <option>Last year</option>
                  <option>Forever</option>
                </select>
              </div>
            </div>
         </div>  <!-- card-body.// -->
      </div> <!-- card.// -->
      <div class="col-9"> <!---New post--->
        <div class="card-columns" id="cards">
           <div class="card">
             <img id="postpic" class="card-img-top w-100" src="./img/Posts/1.jpg" alt="Card image cap">
             <div class="card-body">
               <h5 class="card-title">Photographer</h5>
               <p class="card-text">Lifestyle</p> <hr>
               <p class="card-text">30mins - 1h / 3 days a week<br>£7 - hour</p><hr>
               <div id="propic" class="row">
                 <div class="col-3">
                   <img id="profilepic" class="profilepic" src="./img/Posts/1p.jpg" alt="Cardprofileimg">
                 </div>
                 <div class="col-9">
                   <h5 class"card-title"="">Steven Arroyave</h5>
                   <p class"card-text"="">Plymouth, UK</p>
                  </div>
               </div>
             </div>
           </div>
           <div class="card">
             <img id="postpic" class="card-img-top w-100" src="./img/Posts/2.jpg" alt="Card image cap">
             <div class="card-body">
               <h5 class="card-title">Photographer/Editor</h5>
               <p class="card-text">Lifestyle</p> <hr>
               <p class="card-text">30mins - 1h / 3 days a week<br>£6 - hour</p><hr>
               <div id="propic" class="row">
                 <div class="col-3">
                   <img id="profilepic" class="profilepic" src="./img/Posts/2p.jpg" alt="Cardprofileimg">
                 </div>
                 <div class="col-9">
                   <h5 class"card-title"="">Alejandro Morales</h5>
                   <p class"card-text"="">Plymouth, UK</p>
                  </div>
               </div>
             </div>
           </div>
           <div class="card">
             <img id="postpic" class="card-img-top w-100" src="./img/Posts/3.jpg" alt="Card image cap">
             <div class="card-body">
               <h5 class="card-title">Filmmaker</h5>
               <p class="card-text">Lifestyle</p> <hr>
               <p class="card-text">30mins - 1h / 3 days a week<br>£7 - hour</p><hr>
               <div id="propic" class="row">
                 <div class="col-3">
                   <img id="profilepic" class="profilepic" src="./img/Posts/3p.jpg" alt="Cardprofileimg">
                 </div>
                 <div class="col-9">
                   <h5 class"card-title"="">Sharon Saji</h5>
                   <p class"card-text"="">Plymouth, UK</p>
                  </div>
               </div>
             </div>
           </div>
           <div class="card">
             <img id="postpic" class="card-img-top w-100" src="./img/Posts/4.jpg" alt="Card image cap">
             <div class="card-body">
               <h5 class="card-title">Filmmaker</h5>
               <p class="card-text">Lifestyle</p> <hr>
               <p class="card-text">30mins - 1h / 3 days a week<br>£7 - hour</p><hr>
               <div id="propic" class="row">
                 <div class="col-3">
                   <img id="profilepic" class="profilepic" src="./img/Posts/4p.jpg" alt="Cardprofileimg">
                 </div>
                 <div class="col-9">
                   <h5 class"card-title"="">Daniel Easton</h5>
                   <p class"card-text"="">Plymouth, UK</p>
                  </div>
               </div>
             </div>
            </div>
            <div class="card">
             <img id="postpic" class="card-img-top w-100" src="./img/Posts/5.jpg" alt="Card image cap">
             <div class="card-body">
               <h5 class="card-title">Photographer</h5>
               <p class="card-text">Lifestyle</p> <hr>
               <p class="card-text">30mins - 1h / 3 days a week<br>£7 - hour</p><hr>
               <div id="propic" class="row">
                 <div class="col-3">
                   <img id="profilepic" class="profilepic" src="./img/Posts/5p.jpg" alt="Cardprofileimg">
                 </div>
                 <div class="col-9">
                   <h5 class"card-title"="">Harry Wyatt</h5>
                   <p class"card-text"="">Plymouth, UK</p>
                  </div>
               </div>
             </div>
           </div>
           <div class="card">
             <img id="postpic" class="card-img-top w-100" src="./img/Posts/6.jpg" alt="Card image cap">
             <div class="card-body">
               <h5 class="card-title">Camera crew</h5>
               <p class="card-text">Lifestyle</p> <hr>
               <p class="card-text">30mins - 1h / 3 days a week<br>£7 - hour</p><hr>
               <div id="propic" class="row">
                 <div class="col-3">
                   <img id="profilepic" class="profilepic" src="./img/Posts/6p.jpg" alt="Cardprofileimg">
                  </div>
                 <div class="col-9">
                   <h5 class"card-title"="">Sarah Paulson</h5>
                   <p class"card-text"="">Plymouth, UK</p>
                   </div>
               </div>
             </div>
           </div>
           <div class="card">
             <img id="postpic" class="card-img-top w-100" src="./img/Posts/7.jpg" alt="Card image cap">
             <div class="card-body">
               <h5 class="card-title">Photographer</h5>
               <p class="card-text">Lifestyle</p> <hr>
               <p class="card-text">30mins - 1h / 3 days a week<br>£7 - hour</p><hr>
               <div id="propic" class="row">
                 <div class="col-3">
                   <img id="profilepic" class="profilepic" src="./img/Posts/7p.jpg" alt="Cardprofileimg">
                 </div>
                 <div class="col-9">
                   <h5 class"card-title"="">Jessica Lange</h5>
                   <p class"card-text"="">Plymouth, UK</p>
                  </div>
               </div>
             </div>
           </div>
           <div class="card">
             <img id="postpic" class="card-img-top w-100" src="./img/Posts/8.jpg" alt="Card image cap">
             <div class="card-body">
               <h5 class="card-title">Filmmaker</h5>
               <p class="card-text">Lifestyle</p> <hr>
               <p class="card-text">30mins - 1h / 3 days a week<br>£7 - hour</p><hr>
               <div id="propic" class="row">
               <div class="col-3">
                   <img id="profilepic" class="profilepic" src="./img/Posts/8p.jpg" alt="Cardprofileimg">
                 </div>
                 <div class="col-9">
                   <h5 class"card-title"="">Evan Peters</h5>
                   <p class"card-text"="">Plymouth, UK</p>
                  </div>
               </div>
             </div>
           </div>
           <div class="card">
             <img id="postpic" class="card-img-top w-100" src="./img/Posts/9.jpg" alt="Card image cap">
             <div class="card-body">
               <h5 class="card-title">Photographer</h5>
               <p class="card-text">Lifestyle</p> <hr>
               <p class="card-text">30mins - 1h / 3 days a week<br>£7 - hour</p><hr>
               <div id="propic" class="row">
                 <div class="col-3">
                   <img id="profilepic" class="profilepic" src="./img/Posts/9p.jpg" alt="Cardprofileimg">
                 </div>
                 <div class="col-9">
                   <h5 class"card-title"="">Billy Eichner</h5>
                   <p class"card-text"="">Plymouth, UK</p>
                  </div>
               </div>
             </div>
           </div>
         </div>
      </div> <!---New post end--->
    </div>

Ответы [ 4 ]

1 голос
/ 19 мая 2019

У вас есть проблемы с этим кодом. 

<h5 class"card-title"="">Steven Arroyave</h5>
<p class"card-text"="">Plymouth, UK</p>

<h5 class"card-title"="">Alejandro Morales</h5>
<p class"card-text"="">Plymouth, UK</p>

Я думаю, это должно быть: - 

<h5 class = "card-title">Alejandro Morales</h5>
<p class = "card-text">Plymouth, UK</p>

Аналогичная проблема со структурой во всех классах названий карт. Интересно, почему никто в ответах выше не указал на это?

Кроме того, я чувствую, что ответ @zim сделал работу довольно хорошо. Прокомментируйте, если этот ответ не служит цели. Так что я могу посмотреть на это.

1 голос
/ 19 мая 2019

styles.css содержит .row {align-items:center}, который переопределяет значение по умолчанию align-items:start, поэтому вы должны удалить его из styles.css или использовать класс align-items-start Bootstrap в row.

Кроме того, row должно содержаться в container или container-fluid.

Демо: https://www.codeply.com/go/hYW1lMbM71

0 голосов
/ 19 мая 2019
  1. Используйте .align-items-start on .row для выравнивания по вертикали ( подробнее на Bootstrap 4 docs )
  2. Используйте .контейнер или .контейнер-флюид 

</p>

<code><div class="container">
 <div class="row align-items-start">
  <div class="col-3">create card here</div>
  <div class="col-3">create card here</div>
  <div class="col-3">create card here</div>
  <div class="col-3">create card here</div>
 </div>
</div>
</code>
0 голосов
/ 19 мая 2019 
<div class="container">
    <div class="row">
        <div class="col-3">create card here</div>
        <div class="col-3">create card here</div>
        <div class="col-3">create card here</div>
        <div class="col-3">create card here</div>
    </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...