2
votes

Comment puis-je créer une colonne personnalisée en CSS ou bootstrap

Je travaille habituellement avec les colonnes et les grilles bootstrap, mais juste aujourd'hui, j'ai essayé de faire quelque chose de très différent et j'ai réalisé que je n'étais pas si bon avec bootstrap

J'essaie de créer une colonne comme dans l'image ci-dessous une hauteur totale par la gauche et 2 demi-hauteur par la droite

<div class="container-fluid col-md-12">
    <div class="col-md-6">
    </div>
    <div class="col-md-6">
    </div>
</div>

donc j'ai quelque chose comme dans le code ci-dessus, nous savons tous que cela nous donne deux colonnes de hauteur et de largeur égales côte à côte, mais comment puis-je manipuler cela pour donner ce qui est souhaité dans l'image?

NB: je suis va mettre des images dans les trois colonnes

html css twitter-bootstrap

0 commentaires

4 Réponses :

1
votes

Ajoutez simplement deux blocs divs dans votre deuxième div col-md-6 - le reste est css

<div class="container-fluid col-md-12">
    <div class="col-md-6">
    </div>
    <div class="col-md-6">
        <div class="block">
        </div>
        <div class="block">
        </div>
    </div>
</div>

Découvrez violon ici

3 commentaires

comme @Paulie_D le dit, je recommande de l'envelopper dans un div avec row-class

Cela aide beaucoup, mais mes images semblent déformées

@Dr qui pouvez-vous s'il vous plaît recréer dans un violon?

-1
votes

essayez-le avec css

<div class="container-fluid col-md-12">
    <div class="col-md-7">
    </div>
    <div class="col-md-6 col-md-6.1">
    </div>
    <div class="col-md-6 col-md-6.2">
    </div>
</div>

Modifiez votre code HTML comme ceci

.container-fluid .col-md-12{
       width:100%;
       height:100px;
       background-color:brown;
       background-border:none;
}
.col-md-6{
       width:40px;
       height:50px;
       background-color:green;
       background-border:none;
       float:right;
}
.col-md-6.1{
      background-color:green;
}
.col-md-6.2{
      background-color:pink;
}
.col-md-7{
       width:80px;
       height:100px;
       background-border:none;
       float:left; 
       padding-right:30px;
}

0 commentaires

0
votes

Si vous utilisez Bootstrap4, vous devez ajouter un div .row puis utiliser les classes utilitaires flexbox sur la colonne.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-6">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia, quisquam. In unde sint dolor. Suscipit accusantium accusamus nemo minima Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio quam ipsam labore neque maxime reiciendis iste,
      commodi aut cumque perferendis quaerat sed nisi, minus vero doloribus, quis iure? Quasi commodi nisi quos dicta pariatur voluptatem delectus facere tempore expedita blanditiis ducimus eaque iste reprehenderit voluptatum, natus reiciendis suscipit
      tempora voluptas?
    </div>
    <div class="col-sm-6 d-flex flex-column">
      <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit, deleniti?
      </div>
      <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, inventore.
      </div>
    </div>
  </div>
</div>

.col-sm-6 {
  border: 1px solid grey;
}

.col-sm-6 div {
  border: 1px solid red;
  flex: 1;
}

2 commentaires

cela ne fonctionne pas après avoir ajouté des images dans les trois colonnes

Avez-vous enveloppé l'image dans les divs? Il me semble que vous avez une nouvelle question distincte ici .. et non, BS3 ne peut pas faire ça.

0
votes

Je vous suggère de diviser la deuxième colonne en deux autres sections.

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="container-fluid col-md-12">
  <div class="row">
    <div class="col-6 column-1">

      <img src="//via.placeholder.com/350x150">

    </div>
    <div class="col-6">

      <div class="col-md-12 column-2">
        <img src="//via.placeholder.com/350x150">
      </div>
      <div class="col-md-12 column-3"> <img src="//via.placeholder.com/350x150">
      </div>

    </div>
  </div>
</div>

.container-fluid {
  background: #7F3300;
  padding: 35px;
}

div {
  border: 1px solid black;
  padding: 0;
}

.column-1 {
  background: #808080;
  padding: 35px;
}

.column-2 {
  background: #007F7F;
  padding: 35px;
}

.column-3 {
  background: #FF7F7F;
  padding: 35px;
}

img {
  width: 100%;
}

Modifier: j'ai ajouté des images pour vous montrer comment vous pourriez faire de même.

1 commentaires

@Drwho j'ai ajouté quelques images pour vous, jetez un œil à l'extrait de code ci-dessus pour voir à quoi il ressemble