Estoy haciendo una página sencilla con una API de newsApi. Aplico estilos de bootstrap cuyos archivos están descargado y posteriormente aplico mis propios estilos, pero no veo ningun cambio.Especificamente intento cambiar el flex direction column que da la clase card por el flex direction row que daría la clase article. En teoría con colocar el link stylesheet de la hoja propia después del de bootstrap ya debería darle preferencia, pero aún asi no funciona.
Código del html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="/ccss/a.css">
<title>Document</title>
</head>
<body>
<div id="news">
</div>
</body>
<script src="a.js"></script>
</html>
Código del css:
.article{
display: flex;
flex-direction: row;
margin-top: 100px;
}
.article img{
width: 400px;
height: 150px;
}
.article h2{
font-size: 1.5em;
}
Código del JavaScript que crea los elementos:
let body=document.querySelectorAll("body")[0]
let articleDiv=document.createElement("div")
articleDiv.setAttribute("id","news")
fetch("https://newsapi.org/v2/everything?q=DGT&apiKey=MIAPI(no sé si la deberia ocultar por si acaso sí)")
.then(response => response.json())
.then(data => {
data.articles.forEach(article => {
let articleItem=document.createElement("div")
articleItem.setAttribute("class","card article")
let articleImg=document.createElement("img")
articleImg.setAttribute("src",article.urlToImage)
let articleContent=document.createElement("div")
articleContent.setAttribute("class","articleContent")
let articleHeader=document.createElement("h2")
articleHeader.textContent=article.title
let articleText=document.createElement("p")
articleText.setAttribute("class","lead")
articleText.textContent=article.description
let articleButton=document.createElement("button")
articleButton.setAttribute("class","btn btn-primary")
articleButton.textContent="Ver más"
articleItem.appendChild(articleImg)
articleContent.appendChild(articleHeader)
articleContent.appendChild(articleText)
articleContent.appendChild(articleButton)
articleItem.appendChild(articleContent)
articleItem.style.marginTop="5px"
articleDiv.appendChild(articleItem)
});
body.appendChild(articleDiv)
})
.catch(error => {
console.error(error);
});
!important
Ejemplo.display: flex !important
<>
). De hacerlo, no olvides importar la librería de bootstrap. Y por cierto, está bien que ocultes el API Key :)