Bootstrap Algn элемент горизонтальная задача - PullRequest
Новая
       59

Bootstrap Algn элемент горизонтальная задача

0 голосов
/ 25 февраля 2020

Я хочу разделить строку на два столбца по горизонтали (col-lg-2 & col-lg-10), у меня есть собственный CSS для моего второго столбца, но пользовательский CSS, который я пишу, создает проблему .

enter image description here

HTML: 

 <div class="row">
                    <div class="col-lg-2 col-md-2 icon-upload">
                    <!-- icon ulpoad -->
                    <div class="image-upload icon-align-center">
                      <label for="file-input">
                          <img src="http://icons.iconarchive.com/icons/dtafalonso/android-lollipop/512/Camera-icon.png" class="img-icon" />
                      </label>

                     <input id="file-input" type="file"/>
                        </div>
                </div>
                <div class="col-lg-10 col-md-10">
                    <img src="http://icons.iconarchive.com/icons/dtafalonso/android-lollipop/512/Camera-icon.png" class="img-icon" height="100" width="100" />
                </div>

CSS: 

 .image-upload img { width: 80px; cursor: pointer; }
.icon-upload{
    margin-left: 20px;
    height: 150px;
    width: 50px;
    background-color: lightgrey;
    text-align: center;
    border-radius: 2px;
}
.icon-align-center{
    margin-top: 40px;
}
.icon-upload:hover{
    background-color: #95A5A6;
    cursor: hand;
}

1 Ответ

0 голосов
/ 25 февраля 2020

Удалить margin-left: 20px; из класса icon-upload. Код будет работать нормально.

CSS: 

 .image-upload img { 
     width: 80px; 
     cursor: pointer; 
 }

 .icon-upload {
     height: 150px;
     width: 50px;
     background-color: lightgrey;
     text-align: center;
     border-radius: 2px;
 }

 .icon-align-center {
     margin-top: 40px;
 }

 .icon-upload:hover{
     background-color: #95A5A6;
     cursor: hand;
 }

Проверьте вживую код здесь: https://codepen.io/manaskhandelwal1/pen/LYVxMGN

...