Вопросы Теги

Выравнивание изображения карты

Это то, на что предназначен «защищенный», поскольку главу Visibility объясняет:

Объявленные защищенные члены могут быть доступны только внутри самого класса и наследуются и родительских классов.

blockquote>

Если вам нужно получить доступ к свойству извне, выберите один из них:

  • Не объявляйте его защищенным, сделайте его общедоступным
  • Напишите пару функций для получения и установки значения (getters and setters)

Если вы не хотите изменять оригинальный класс (потому что это сторонняя библиотека, вы не нужно путаться) создать пользовательский класс, который расширяет исходный: 

class MyFields_Form_Element_Location extends Fields_Form_Element_Location{
}

... и добавьте там свой приемник / сеттер.

1
задан Adam Howard 4 March 2019 в 04:13
поделиться

2 ответа

использовать position:absolute для тела карты 

.card-body{
    position:absolute;
    bottom:0;
 }


.card-img-top {
  width: 100%;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  height: 650px;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.card-body{
position:absolute;
bottom:0;
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="card" style="width: 18rem;">

  				<img class="card-img-top fluid-img" src="briefcase.png" alt="Card image cap">
  			<div class="card-body">
    				<h5 class="card-title">Suit</h5>
   					 <p class="card-text">Professional, business executive look.</p>
   					 <p class="text-center">€299</p>
    				<a href="#" class="btn btn-success btn-block">Add to cart</a>
  </div>
</div>

0
ответ дан Udhay Titus P 4 March 2019 в 04:13
поделиться

вам нужно использовать flexbox 

<div class="card">
    <div class="wrapper-image">
        <img class="card-img-top fluid-img" src="briefcase.png" alt="Card image cap">
    </div>
    <div class="card-body">
    <h5 class="card-title">Suit</h5>
    <p class="card-text">Professional, business executive look.</p>
    <p class="text-center">€299</p>
    <a href="#" class="btn btn-success btn-block">Add to cart</a>
  </div>
</div>

.wrapper-image {
    height: 18rem;
    display: flex;
    align-items: flex-start;
}

, в этом случае обертка imagem будет иметь 18rem height, она больше, чем image, поэтому свойство align itens поместит imagem в начальный div (вверху). также можно использовать center и flex-end вместо flex-start, гибкий дисплей позволяет использовать свойства align-items и justify-content (это позволяет расположить изображение по горизонтали). display flex также полезно поместить все внутри тега в той же строке, так что если внутри te wrapper-image вы поместите два изображения, они будут показаны рядом, для правильного использования вы можете использовать flex-direction: column. Если это не так, вы можете узнать больше о flexbox здесь [ 119] Если это было бесполезно, лучше покажите свой код, если возможно, поместите его в кодовое поле, чтобы я мог быть более полезным

0
ответ дан TheDev 4 March 2019 в 04:13
поделиться