0
votes

Ne peut pas faire cette case réactive

J'essaie de mettre un peu de contenu dans une boîte, mais je ne peux pas créer le texte et le bouton pour vous installer dans la case sur les écrans moyens et petits. J'ai essayé des méthodes, mais aucun d'entre eux n'a travaillé jusqu'à présent.

Voici mon code actuel: p>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="row d-flex">
  <div class="col-9">
    <div class="box">
    </div>
  </div>

  <div class="col-3">
    <div class="explore">
      <p id="exploreTitle">At vero eos et accusamus et iusto</p>
      <p id="exploreParagraph">Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
        Recusandae dicta ut illo reiciendis delectus maiores dicta.</p>
      <button type="button" class="btn" id="exploreButton">Explore</button>
    </div>
  </div>
</div>

html css bootstrap-4 responsive-design

0 commentaires

3 Réponses :

0
votes

Il suffit d'ajouter xxx

Il rendra les divs sensibles.
Il obtiendra la pleine largeur des écrans inférieurs à 768px (MD Point d'arrêt).
Vous pouvez changer de MD par SM si vous le souhaitez.
En savoir plus sur les points d'arrêt de bootstrap .

1 commentaires

Mais je ne veux pas que l'exploration-div ait 12 colons, jamais

0
votes

Il est bon d'utiliser la propriété CSS min-largeur car vous avez utilisé tous les conteneurs et tous les éléments de la tension statique, regardez ma solution

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row d-flex">
  <div class="col-9">
    <div class="box">
    </div>
  </div>

  <div class="col-3">
    <div class="explore">
      <p id="exploreTitle">At vero eos et accusamus et iusto</p>
      <p id="exploreParagraph">Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
        Recusandae dicta ut illo reiciendis delectus maiores dicta.</p>
      <button type="button" class="btn" id="exploreButton">Explore</button>
    </div>
  </div>

0 commentaires

0
votes

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>

<div class="container">
  <div class="row align-items-center">
    <div class="col-md-9 col-12">
      <div class="box">
      </div>
    </div>

    <div class="col-12 col-md-3">
      <div class="explore">
        <p id="exploreTitle">At vero eos et accusamus et iusto</p>
        <p id="exploreParagraph">Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
          Recusandae dicta ut illo reiciendis delectus maiores dicta.</p>
        <button type="button" class="btn" id="exploreButton">Explore</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

0 commentaires