ReactJS и бутстрап - PullRequest
Новая
       1

ReactJS и бутстрап

0 голосов
/ 25 августа 2018

У меня есть приложениеactJS, и я хотел бы интегрировать загрузчик.У меня есть следующий файл index.html: 

<html>
<head>
    <title>Whats my junk worth</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Just+Another+Hand' rel='stylesheet' type='text/css'>
</head>
<body class="body_background">
    <div id="root"></div>
    <script src="bundle.js"></script>

     <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


</body>

Я попытался выложить несколько простых страниц с кодом, подобным следующему: 

<div class="row">
    <div class="col-sm-4">
        Put out some test code
    </div>
    <div class="col-sm-4">
        Put out some test code
    </div>
    <div class="col-sm-4">
        Put out some test code
    </div>
</div>

Приведенный выше пример сгенерирован3 строки вывода вместо охвата одной строки.Я также попытался изменить class = на className =, но это не имело никакого эффекта.

Есть ли что-то еще, что мне нужно включить, чтобы использовать классы начальной загрузки?

Ответы [ 3 ]

0 голосов
/ 25 августа 2018

Вы можете использовать act-bootstrap и преобразовать ваш код в следующее: 

<Row className="show-grid">
    <Col xs={6} md={4}></Col>
    <Col xs={6} md={4}></Col>
    <Col xs={6} md={4}></Col>
</Row>
0 голосов
/ 25 августа 2018

Код и ссылки Bootstrap должны работать так, как он у вас есть.

"Я пытался выложить несколько простых страниц с кодом"

Как?Вы поместили html в рендер Component () или поместили его прямо в шаблон?В любом случае это должно работать.Также следует помнить, что точка останова sm составляет 576 пикселей, поэтому столбцы будут располагаться вертикально, если область просмотра с размером менее 576 пикселей.

Рабочая демонстрация: https://codesandbox.io/s/5vm72q34qk

PS - response-bootstrap notn 't пока поддерживает Bootstrap 4.

0 голосов
/ 25 августа 2018

Рассмотрите возможность использования пакета response-bootstrap .Вы не будете тратить время на такие вещи.Только компоненты, только функциональность.

Это будет выглядеть примерно так: 

<Row className="show-grid">
    <Col xs={6} md={4}></Col>
    <Col xs={6} md={4}></Col>
    <Col xs={6} md={4}></Col>
</Row>

UPD

Bootstrap имеет начало работы руководство, которое объясняет, как вы должны обращаться со своими активами.Надеюсь, это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...