Отсутствие частей CSS при размещении на страницах Github, но отлично работает при локальном размещении - PullRequest
Новая
       12

Отсутствие частей CSS при размещении на страницах Github, но отлично работает при локальном размещении

0 голосов
/ 07 октября 2019

Когда я работаю над своим сайтом локально, CSS работает именно так, как я этого хочу, но при развертывании на Github Pages остаются некоторые правила, оставляя некоторые из моих компонентов (модальные всплывающие окна, дляпример) привязка к левому краю экрана, когда я хочу, чтобы они были отцентрированы, или стрелки индикатора не перемещались в положение, в котором я хочу, чтобы они плавали. Я пытался связать свою таблицу стилей и бутстрапов, но до сих пор не повезло. Я заметил, что, осматривая страницу, response-bootstrap перезаписывает мои классы своими собственными, если открыт модал. Есть ли у меня что-то такое, чтобы стилизовать эти классы? Это довольно сложно.

Локальный рендер: https://imgur.com/a/UIWA1Bv

Хостинг рендеринга: https://imgur.com/a/9l2oQic

Консоль разработчика: https://imgur.com/a/zMmjtHD

Репо: https://github.com/dw-ll/berelson-project/tree/master/timeline

index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <link href="@fortawesome/fontawesome-free/css/all.min.css" />
    <link rel="stylesheet" type="text/css" href="../src/App.css" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
      integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
      crossorigin="anonymous"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>Vessel Archives</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

index.js 

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import "./App.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "@fortawesome/fontawesome-free/css/all.min.css";
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

serviceWorker.unregister();

tree.jsx 

import React, { createRef, Component, useState } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Switch } from "react-router";
import { LinkContainer } from "react-router-bootstrap";
import "react-vertical-timeline-component/style.min.css";
import "bootstrap/dist/css/bootstrap.css";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
import $ from "jquery";
require("bootstrap");
return (
    <Router>
      <Switch>
        <Route
          path="/pre/henry"
          exact
          render={() => {
            return <HenryP />;
          }}
        />
        <Route
          path="/pre/david"
          exact
          render={() => {
            return <David />;
          }}
        />
        <Route
          path="/post/jack"
          exact
          render={() => {
            return <JackPost />;
          }}
        />
        <Route
          path="/post/riva"
          exact
          render={() => {
            return <RivaPost />;
          }}
        />

        <div class="top">
          <div>
            <h4>Berelson Family Tree</h4>
            <h6>Explore and learn more about the Berelson ancestry.</h6>
          </div>

          <div class="tree-wrapper">
            <div class="tree">
              <ul>
...
...
      <ul>
                        <li>
                          <a onClick={handleDavidOpen}>
                            <img alt="" class="tree-profile" src={DavidB} />
                            <div class="tree-info">David</div>
                          </a>
                          <Modal
                            size="lg"
                            aria-labelledby="contained-modal-title-vcenter"
                            centered
                            show={davidOpen}
                            onHide={() => setDavidOpen(false)}
                            className="modal-container"
                          >
                            <Modal.Header closeButton>
                              <Modal.Title
                                className="modal-body"
                                id="contained-modal-title-vcenter"

                              >
                                David Berelson
                              </Modal.Title>
                            </Modal.Header>
                            <Modal.Body
                              className="modal-body"

                            >
                              <img alt="" class="tree-profile" src={DavidB} />
                              <h6>B.1900 D.1960</h6>
                              <p>
                                Cras mattis consectetur purus sit amet
                                fermentum. Cras justo odio, dapibus ac facilisis
                                in, egestas eget quam. Morbi leo risus, porta ac
                                consectetur ac, vestibulum at eros.
                              </p>
                            </Modal.Body>
                            <Modal.Footer className="modal-foot">
                              <Button onClick={handleDavidClose}>Close</Button>
                              <LinkContainer to="/pre/david">
                                <Button>Learn</Button>
                              </LinkContainer>
                            </Modal.Footer>
                          </Modal>
...

App.css 

modal-container{
  width:20%;

}
.modal-open{
  justify-content:center;
  text-align:center;
  background:black;
}
.modal-body{
  text-align: center;
  font-family:"Times"
}
.modal-foot{
  justify-content: left;
}
.fade modal-container modal show{
  width:1450px;
  display:block;
  padding-left:0;
}
...