J'essaie actuellement d'apprendre React et React-Bootstrap.
J'essaie de faire bon usage de la disposition de la grille React-Bootstrap. Je ne sais pas si je ne l'implémente pas correctement. Mon instinct dit que j'utilise une version impropver quelque part parce que pour autant que je sache, la fonctionnalité "Container, Col, Row" ne fonctionne pas du tout.
Quel pourrait être le problème? Je suis à court d'idées.
Versions de package.json:
Hello World
Le package.json du répertoire "bootstrap":
XXX
Le package.json du répertoire "react-bootstrap":
import React from 'react';
import ReactDOM from 'react-dom';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
class Module extends React.Component
{
constructor(props)
{
super(props);
}
clickHandler = (command) =>
{
// ... some handler code here
}
render()
{
return (
<Container>
<Row>
<Col>
<table>
<tr>
<th class="r1_header"> Header 1 </th>
<th class="r1_header"> Header 2 </th>
<th class="r1_header"> Header 3 </th>
</tr>
<tr>
<td> <button/> </td> // some more button stuff here
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<th class="r2_header"> Header 1 </th>
<th class="r2_header"> Header 2 </th>
<th class="r2_header"> Header 3 </th>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
<tr>
<td> <button/> </td>
<td> <button/> </td>
<td> <button/> </td>
</tr>
</table>
</Col>
<Col>
// another table here... should be aligned next to the
// prev "col" horizontally but is going underneath (vertically)
</Col>
</Row>
</Container>
);
}
}
Veuillez noter que j'ai également essayé d'installer et d'utiliser bootstrap @ 3 sans chance:
npm install bootstrap @ 3 --save
npm i --save bootstrap @ 3
Extrait majeur de index.js:
"_from": "react-bootstrap@^1.0.0-beta.6", "_id": "react-bootstrap@1.0.0-beta.6",
* UPDATE *
Voici un MCVE ...
Le texte affiché doit être HelloWorld mais à la place:
"_from": "bootstrap@latest", "_id": "bootstrap@4.3.1",
4 Réponses :
Vous pouvez utiliser la grille, puis spécifier le nombre de colonnes que vous souhaitez donner pour la table et le nombre de colonnes que vous souhaitez conserver pour d'autres éléments sur 12.
comme dans le code ci-dessous.
importer la grille, la ligne et les cols comme
import { Row, Col, Grid } from 'react-bootstrap';
<Grid>
<Row>
<Col md="6">
<table>
<tr>
<th class="r1_header"> Header 1 </th>
<th class="r1_header"> Header 2 </th>
<th class="r1_header"> Header 3 </th>
</tr>
<tr>
<td> <button /> </td> // some more button stuff here
<td> <button /> </td>
<td> <button /> </td>
</tr>
<tr>
<td> <button /> </td>
<td> <button /> </td>
<td> <button /> </td>
</tr>
<tr>
<td> <button /> </td>
<td> <button /> </td>
<td> <button /> </td>
</tr>
<tr>
<th class="r2_header"> Header 1 </th>
<th class="r2_header"> Header 2 </th>
<th class="r2_header"> Header 3 </th>
</tr>
<tr>
<td> <button /> </td>
<td> <button /> </td>
<td> <button /> </td>
</tr>
<tr>
<td> <button /> </td>
<td> <button /> </td>
<td> <button /> </td>
</tr>
<tr>
<td> <button /> </td>
<td> <button /> </td>
<td> <button /> </td>
</tr>
</table>
</Col>
<Col md="6">
{"dsfdsdsf"}
</Col>
</Row>
</Grid>
Merci pour votre contribution. Malheureusement, il ne semble pas que Grid soit pris en charge dans la version que j'utilise. J'ai essayé de spécifier la longueur de colonne pour les conteneurs et cela n'a pas aidé non plus.
Grid a été renommé Container. vérifiez react-bootstrap.netlify.com/migrating
J'ai résolu le problème. C'était un faux pas de ma part. J'ai manqué une partie cruciale de la configuration décrite sur la page principale de react-bootstrap concernant les feuilles de style .
Dans index.html copiez et collez le chemin vers les dernières feuilles de style bootstrap:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
Vous pouvez également ajouter import 'bootstrap / dist / css / bootstrap.min.css';
dans le fichier index.js. Assurez-vous de npm install bootstrap .
Selon la documentation de react, vous devez d'abord installer bootstrap
npm Installer le bootstrap react-bootstrap
alors vous devez importer cette ligne dans votre index.js ou App.js
<Container>
<Row>
<Col>1</Col>
<Col>2</Col>
<Col>3</Col>
</Row>
</Container>
puis vous pouvez importer comme ça dans vos composants import {Container, Row, Col} depuis 'react-bootstrap';
et utilisez comme ceci
import 'bootstrap/dist/css/bootstrap.min.css';
Ce que vous essayez d'accomplir ici ou ce que devrait être le comportement attendu n'est pas clair. Pourquoi avez-vous une
tabledans uneCol ?J'essaie de placer un bloc de texte à côté du tableau horizontalement.
Ainsi, le tableau serait dans la première colonne de la ligne et certaines données dans la suivante.
Pourriez-vous créer un MCVE (exemple minimum, complet et vérifiable) dans codesandbox ou similaire?
@Pineda J'ai édité mon message avec le MCVE.