Колы бутстрапа не стоят в ряд Angular
У меня проблема с компонентами Angular. У меня такой код:
<div class = "container">
<div class = "row">
<app-item></app-item>
<app-item></app-item>
</div>
</div>
Внутри компонента app-item я получил этот код:
<div class = "col-6">
<p>Some text</p>
</div>
Я не могу понять, почему эти столбцы не стоят в ряд. Фактически это один столбец под вторым
Но если мне это нравится:
<div class = "container">
<div class = "row">
<div class = "col-6">
<p>Some text</p>
</div>
<div class = "col-6">
<p>Some text</p>
</div>
</div>
</div>
Тогда все работает нормально. Почему мой код не работает, когда я пытаюсь использовать компоненты? По какой причине это происходит?
Также по некоторым причинам мой компонент app-item не имеет 100% ширины
Кто-нибудь может мне объяснить, что случилось?
@ user184994 Я думаю, что все текущие версии браузеров, такие как Opera, Google Chrome и т. д.
Хорошо. Можете ли вы вместо этого переместить класс col-6 в тег app-item?
@ user184994, если я перемещаю тег col-6 в компонент, как этот <app-item class = "col-4"> </app-item>, и удаляю класс col-4 из файла компонента. оно работает. Но я на самом деле не уверен, что это правильный путь, не так ли?
Я считаю, что проблема в том, что стиль flex применяется только к непосредственным потомкам, и в этом случае у вас есть app-item на пути. Существует правило CSS display: contents, но оно по-прежнему имеет очень ограниченную поддержку браузером.
Чтобы добавить к вышесказанному, документы Boostrap говорят only columns may be immediate children of rows, а в исходном коде они являются непосредственными дочерними элементами нет.
@ user184994, я понимаю. Есть ли способ удалить компонент app-item из DOM? Я имею в виду только показывать то, что находится внутри этого компонента, но не показывать сам компонент
Не то чтобы я мог видеть ...
Ответы 3
Пожалуйста, попробуйте следующее,
<div class = "container">
<div class = "row">
<div class = "col-6">
<app-item></app-item>
</div>
<div class = "col-6">
<app-item></app-item>
</div>
</div>
</div>
Внутри app-item
<p>Some text</p>
Я уверен, что это сработает, но мне нужно динамически брать данные из json, я не знаю, сколько столбцов у меня есть, это проблема. Иногда этот способ не работает
Просто вам нужно включить ссылку на библиотеку начальной загрузки:
<html>
<head>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class = "container">
<div class = "row">
<div class = "col-sm-6">
<p>Some text</p>
</div>
<div class = "col-sm-6">
<p>Some text</p>
</div>
</div>
</div>
</body>
</html>
Это может быть поздно, но может помочь OP или кому-то еще. Я решил это аналогичным образом, хотя я мог бы решить его, как упомянул @malindu, потому что я знал, сколько cols будет там, но это не было универсальным.
Таким образом, если вы передадите класс непосредственно вашему component, как в следующем фрагменте кода, и удалите div col-* изнутри компонента, он будет работать нормально, потому что теперь col является прямым дочерним элементом строки. Проверьте фрагмент кода ниже:
<div class = "container">
<div class = "row">
<app-item class = "col-6"></app-item> <-------- check the class here
<app-item class = "col-6"></app-item>
</div>
</div>
А затем внутри вашего компонента
<p>Some text</p> <-------and then it is removed from inside here
Какие браузеры вам нужно поддерживать?