Панель поиска автозаполнения в angular js

Я пытаюсь сделать img в моем div отзывчивым. Я также хотел бы, чтобы изображения отображались как 3 в ряд для максимального размера экрана.

index.html

.container {
border: 1px solid #333;
border-radius: 8px;
background-color: #fff;
margin:5px;
padding:5px;
height:auto;
width:auto;    
}

img {
  max-height: auto;
  max-width: auto;
}

<div class = "container">
        <div class = "col-sm-4"  ng-repeat = "hbl in hbls"></div>
           <a href ng-repeat = "h in hbl.data_list"><img ng-src = "{{h.img}}" 
                 alt = "" >
                  {{n.name}} </a>
        </div>
     </div>

Добро пожаловать в Stack Overflow. Покажите, пожалуйста, вашу последнюю нерабочую попытку решения этой проблемы. Обычно более поучительно видеть исправления в вашем коде, чем читать чужое решение. См. stackoverflow.com/help/how-to-ask

— 10.06.2018 08:52

@Sanjika kumari, у тебя небезопасность </div>

— 10.06.2018 08:54

какую версию бутстрапа вы используете?

— 10.06.2018 08:55

css angularjs ajax

10.06.2018 08:33

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 1

У вас ненужный </div>
Если вы хотите for maximum screen size, вы должны установить col-lg-4 и НЕТcol-sm-4, потому что sm предназначен для наименьшего размера экрана, а не максимум

.container {
border: 1px solid #333;
border-radius: 8px;
background-color: #fff;
margin:5px;
padding:5px;
height:auto;
width:auto;    
}

img {
  max-height: auto;
  max-width: auto;
}

<div class = "container">
        <div class = "col-lg-4"  ng-repeat = "hbl in hbls"></div>
           <a href ng-repeat = "h in hbl.data_list">
           <img src = "https://material.angular.io/assets/img/examples/shiba1.jpg" 
                 alt = "" >
                  Name</a>
</div>

10.06.2018 09:01

Другие вопросы по теме

Директива AngularJS не найдена при попытке запустить тест?

Маршрутизация AngularJS в коде

Angularjs модели предварительной загрузки материалов

Передача javascript в angularjs отображает только первое значение

AngularJS и Bootstrap: Ошибка: [$ injector: unpr]

Как перебрать массив объектов в angularjs

Angular - подключение представлений к другим и / или родительским компонентам

AngularJS $ http.get с ngRoute как перечислить детали

AngularJS: ng-repeat обнаруживает смену группы

Рекурсивная директива AngularJS с событием щелчка и $ http get

Панель поиска автозаполнения в angular js

Ответы 1

Другие вопросы по теме

Похожие вопросы