Компонент React не совпадает с React- bootstrap navbar - PullRequest
Новая
       65

Компонент React не совпадает с React- bootstrap navbar

0 голосов
/ 04 августа 2020

Я пытаюсь выровнять и изменить размер реагирующего компонента под Navbar, используя react-bootstrap v0.33.1. Я хочу, чтобы карта имела полную ширину компонента Navbar и была выровнена по центру под ним. Однако независимо от того, как я размещаю компонент, он будет выполнять одно из следующих действий:

  1. Если я использую компоненты <Grid> и <Col> для обертывания компонента <Map>, тогда карта находится слишком далеко вправо. 
export default function Map() {
  return (
    <Grid>
      <Col md={12}>
        <MapContainer />
      </Col>
    </Grid>
  );
}

enter image description here

  1. Если я удалю компонент <Grid> and then I end up with the `на всю ширину экрана моего устройства. 
export default function Map() {
  return (
    <MapContainer />
  );
}

enter image description here

Here are the other components:

function MapContainer(props) {
    const mapStyles = {
        width: '100%',
        height:'500px'
    };

    return (
        <div>
            <Map
                google={props.google}
                zoom={10}
                // style={{
                //     width: "300px"
                // }}
                style={mapStyles}
                initialCenter={{
                    lat: 47.6128856,
                    lng: -122.3631801
                }}
            />
        </div>
    )
}

function App() {
  return (
    <div className="App container">
      <Navbar fluid collapseOnSelect>
        <Navbar.Header>
          <Navbar.Brand>
            <Link to="/">Skatespots</Link>
          </Navbar.Brand>
          <Navbar.Toggle />
        </Navbar.Header>
          <Navbar.Collapse>
            <Nav pullRight>
              { isAuthenticated
                ? <NavItem onClick={handleLogout}>Logout</NavItem>
                : <>
                    <LinkContainer to="/signup">
                      <NavItem>Signup</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/login">
                      <NavItem>Login</NavItem>
                    </LinkContainer>
                  </>
              }
            </Nav>
          </Navbar.Collapse>
      </Navbar>
      <AppContext.Provider value={{isAuthenticated, userHasAuthenticated}}>
        <Routes />
      </AppContext.Provider>
    </div>
  );

.App {
  margin-top: 15px;
}

.App .navbar-brand {
  font-weight: bold;
}

Я не знаю, в чем проблема, и эта простая проблема вызывает такую ​​боль. использование отрицательного значения маржи кажется неправильным способом исправить сценарий 1, а использование фиксированной ширины с px кажется, что это не будет динамическим c для разных размеров экрана для сценария 2. Спасибо.

...