标签: react-bootstrap

我正在使用此控件进行分页链接并能够得到以下结果。

我可以更改非选定/活动项目的背景颜色，但如何更改选定项目的样式，如上图 8 所示，它是紫色的，所以我需要它是不同的颜色。

下面是react中的JS代码

const styles = theme => ({
    paginationItemStyle: {
        marginLeft: "5px",
        color: "white"
    },
    paginationLinkStyle: {
        backgroundColor: "#b90000",
        borderRadius: "5px",

        "&:hover": {
            backgroundColor: "#772e2e",
        },

        "&:active": {
            backgroundColor: "#772e2e",
        }
    }
});


<Pagination>

    <PaginationItem>
        <PaginationLink previous />
    </PaginationItem>

    {someNumbersList.map((i, key) => (
    <PaginationItem key={key} className={classes.paginationItemStyle} active={currentPage==(i+1)}>
        <PaginationLink className={classes.paginationLinkStyle}>
            {i+1}
        </PaginationLink>
    </PaginationItem>
    ))}

    <PaginationItem>
        <PaginationLink next />
    </PaginationItem>

</Pagination>

我看到一个与 Bootstrap 中未找到的一堆 .eot 字形相关的错误。我收到两个我认为相关的错误。一堆无法解析或字形不存在的错误，与有关字段browser不包含有效别名配置的错误混合在一起。

我已经包含了完整的错误消息以及 babelrc 文件和 webpack 配置。我还将在下面包含更长的 package.json 以防相关。

错误表明它正在寻找如下路径：

/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot

然而实际路径应该是：

/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot

错误：

ERROR in ./node_modules/bootstrap-loader/no-op.js (./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":3,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style-loader","css-loader","sass-loader"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader/.bootstraprc-3-default","bootstrapPath":"/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass","bootstrapRelPath":"../bootstrap-sass"}!./node_modules/bootstrap-loader/no-op.js)
Module not found: Error: Can't resolve '../bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot' in '/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader'
resolve '../bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot' in '/var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader'
  using description file: /var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-loader/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/package.json (relative path: ./assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /var/www/FlaskApp/people-app-prod/static/node_modules/bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration …

我正在开发一个大型团队项目，该项目有react-bootstrap 1.0.0 以及bootstrap 4.3.1 的css+js。一些开发人员更喜欢使用 React-Bootstrap 组件，而另一些开发人员更喜欢使用 Bootstrap 类来设置样式元素。所以我们最终得到了两种不同风格的代码：

<ListGroup>
  <ListGroup.Item>
    Cras justo odio
  </ListGroup.Item>

与

<ul className="list-group">
  <li className="list-group-item">
    Cras justo odio
  </li>

如果继续这样下去，我们可能会遇到什么障碍？

我看到的一个问题可能是将来升级react-bootstrap 或bootstrap。由于react-bootstrap依赖于bootstrap，因此升级一个需要同时升级另一个。这意味着同时遵循两种迁移策略。

我正在使用 React-Bootstrap 并构建一个导航栏。我想用 Font Awesome 汉堡包图标替换 React-Bootstrap 汉堡包菜单图标。

如何更改内置汉堡菜单？这是我的导航栏：

<Navbar expand="lg">
   <Navbar.Brand href="#home">
      <FontAwesomeIcon icon="gem" color="#20FC8F" size="2x" />
   </Navbar.Brand>
   <Navbar.Toggle aria-controls="basic-navbar-nav"/>
   <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="mr-auto">
         <Nav.Link href="#home">Home</Nav.Link>
         <Nav.Link href="#link">Link</Nav.Link>
      </Nav>
   </Navbar.Collapse>
</Navbar>

我正在导入我想要使用的 Font Awesome 图标并像这样显示它：

    <FontAwesomeIcon icon="bars" color="#20FC8F" size="2x" />;

我如何使用它来代替 React-Bootstrap 切换器？

我正在使用react-bootstrap选项卡组件：

如何在选项卡标题（消息）旁边添加徽章

<span class="badge badge-success">20</span>


<Tabs
      id="controlled-tab-example"
      activeKey={key}
      onSelect={(k) => setKey(k)}
    >
      <Tab eventKey="home" title="Home">
        <Home/>
      </Tab>
      <Tab eventKey="profile" title="Profile">
       <Profile/>
      </Tab>
      <Tab eventKey="contact" title="Messages" disabled>
        <Messages/>
      </Tab>
    </Tabs>

所以我可以向用户显示他有多少条未读消息。

我正在处理一个表单，并且正在使用react-bootstrap。我对所有字段进行了验证，除了类型输入之外，它按预期工作select。这是我的表格：

<Form
  className="order-details-form"
  noValidate
  validated={validated}
  onSubmit={handleProceed}
>
  <div className="row phone-number-wrapper">
    <img src={code_arrow} />
    <div className="overlay" />
    <Form.Group
      className="country-code-wrapper"
      onChange={(e) => countryFlagHandler(e)}
    >
      {imgLink && (
        <img
          src={`${imgLink}`}
          alt="country-flag"
          id="img"
          className="flag-img"
        />
      )}
      <Form.Control
        id="select"
        as="select"
        type="select"
        name="country_code"
        onChange={setFormValue}
        value={form.country_code}
      >
        <>
          <option data-countrycode="">Select Code</option>
          {countryCodes}
        </>
      </Form.Control>
    </Form.Group>
    <Form.Group className="col-md-6">
      <Form.Label>Email</Form.Label>
      <Form.Control
        type="email"
        name="email"
        onChange={setFormValue}
        placeholder="Add Email"
        value={oldCustomer ? oldCustomer.email : form.email}
      />
    </Form.Group>
  </div>
  <div className="row">
    <Form.Group className="col-md-6">
      <Form.Label>
        First Name<span className="req-tag">*</span>
      </Form.Label>
      <Form.Control
        required
        type="text"
        name="first_name" …

我正在使用react-bootstrap开发一个react项目，并在单击下拉菜单时遇到此警告。

Popper：CSS“边距”样式不能用于在 Popper 与其参考元素或边界之间应用填充。要复制边距，请使用offset修饰符以及和修饰符padding中的选项。preventOverflowflip

<Dropdown alignRight className="dropdown m-0">
   <Dropdown.Toggle as={CustomToggle} />
   <Dropdown.Menu style={{ margin: 0 }}>
      <Dropdown.Item >edit</Dropdown.Item>
   </Dropdown.Menu>
</Dropdown>

我该如何解决这个问题？

我正在尝试将视口高度设置为这两列，但由于某些未知的原因，它不起作用，因为结果两列具有相同的高度，尽管它不应该如此。为了您的信息，我在这里使用 React-bootstrap。不知道是我的问题还是什么？无论如何，这是供您参考的代码：

import React from "react;
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col"

const AdminPanel = () => {
  const users = [{ name: "Talha" }, { name: "Ali" }];
  return (
    <Container className="pt-5">
      <Row className="d-flex justify-content-around">
        <Col className="vh-50 border border-primary col mx-5">
          {users.map((user) => (
            <Row className="py-2 px-2">{user.name}</Row>
          ))}
        </Col>
        <Col className="border border-primary mx-5">
          <h1>
            list list list list list list list list list list list list list
          </h1>
        </Col>
      </Row>
    </Container>
  );
}; …

我已经为我正在使用react-bootstrap. 我已经让所有集成和分页正常工作。react我对/比较陌生，bootstrap而且还没有做过很多css。我想css尽可能避免，这就是为什么我选择与react-bootstrap

我遇到的问题是无法使我的分页出现在块的中心：

我的反应钩子看起来像这样：

return (
        <div>
            <div align="center">
                <div className="p-3">
                    <Disclaimer/>
                </div>
                <Pagination size="lg" class="text-center">
                    {pages}
                </Pagination>
                {custom_cards}
                <Pagination size="lg" class="text-center">
                    {pages}
                </Pagination>
            </div>
        </div>
    );

我知道修复在这里：

                <Pagination size="lg" class="text-center">
                    {pages}
                </Pagination>

我尝试过align诸如此类的其他事情text-center。作为新手，我没有合适的关键字来为我在网络上提供良好的搜索结果。如果您有任何线索，我将不胜感激。

当我使用以下链接时，我的 React 应用程序按预期工作，这意味着如果我单击链接，应用程序不会完全重新加载，而只是更改其前端外观。

<Link to="/about">About</Link>

现在我想使用 React-Bootstrap 中的导航栏。但是，如果我单击导航栏，我的整个网络应用程序就会重新加载，这是我不想要的。

这是我认为我的代码的相关部分：

  <Router>

<Navbar bg="dark" variant="dark">
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav className="mr-auto">
      <Nav.Link to="/about">Page 1</Nav.Link>
      <Nav.Link href="/about2">Page 2</Nav.Link>
    </Nav>
  </Navbar.Collapse>
</Navbar>

<hr />

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/about2">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
         
    </Router>

当我使用“to”时，它根本不起作用。当我使用“href”时，引用有效，但整个网络应用程序会重新加载 - 这并不是我真正想要的。我怎样才能解决这个问题？提前致谢！