使用 Bootstrap (Reactstrap) 在单行中显示响应 header

Question

我正在使用 Reactstrap css 框架制作一个 React 应用程序，js 文件看起来，

Example.Js

import React, { Component } from "react";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  Container,
  Button,
  Badge
} from "reactstrap";

const links = [
  { href: "#home", text: "Home" },
  { href: "#card", text: "Product" },
  { href: "#about", text: "About" },
  { href: "#cata", text: "Categories" },
  { href: "#test", text: "Blogs" },
  { href: "#test2", text: "News" },
  { href: "#busns", text: "Adds", className: "btnadd" },
  { href: "/login", text: "LOGIN" }
];

const createNavItem = ({ href, text, className }) => (
  <NavItem>
    <NavLink href={href} className={className}>
      {text}
    </NavLink>
  </NavItem>
);

export default class Example extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  render() {
    return (
      <div>
        <Container>
          <Navbar light expand="md" className="navbar-style">
            <NavbarToggler onClick={this.toggle} />
            <NavbarBrand href="/">
              <img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" />
            </NavbarBrand>
            <NavbarBrand href="/">The Big brand title will be displayed here !</NavbarBrand>
            <Collapse isOpen={this.state.isOpen} navbar>
              <Nav className="ml-auto" navbar>
                {links.map(createNavItem)}
              </Nav>
            </Collapse>
            <Nav className="ml-auto" navbar>
              <NavItem className="cart-wrapper">
                <Button className="cart-style" color="primary" size="sm">
                  Cart
                </Button>
                <Badge className="badge-style"> 10 </Badge>
              </NavItem>
            </Nav>
          </Navbar>
        </Container>
      </div>
    );
  }
}

这里对于普通视图来说很好，但是当我们在响应式视图中查看时，切换器在第一行，导航栏徽标移到下一行，然后导航栏标题（字符稍大）移到另一行，最后是购物车带有徽章的按钮在另一行。

所以上面的需要在responsive(Mobile view)中改成一行

它应该看起来像，

---------------------------------------------------------

toggle-button  brand-icon brand-title  cart-button-badge 

---------------------------------------------------------

品牌标题可以像这样用折线显示，

------------------------------------------------------------------------

toggle-button  brand-icon   The Big brand title        cart-button-badge 
                            will be displayed here !

------------------------------------------------------------------------

请帮助我实现上述结果，使 header 在响应式查看时显示在一行中。

工作示例： https://stackblitz.com/edit/reactstrap-navbartoggler-example-mhvfmc

即使是正常的 bootstrap 本身我也面临这个问题，

纯 Bootstrap 参考： https://codepen.io/Maniraj_Murugan/pen/NWPaQGB

下面给出的图像是我在使用 MUI css 的旧应用程序中已有的参考，但现在我需要将其替换为 bootstrap 并且需要具有完全相同的输出如下图所示：

Answer 1

NavBar 组件内置 css flex-wrap: wrap

  change wrap to nowrap: (overwrite css)

      <Navbar light expand="md" className="navbar-style" style={{ flexWrap:'nowrap' }}>

Answer 2

以下是根据您问题的要求给出的解决方案

You can change the media query screen size as per req, Below query cover tab and phone, Just pase the below code in your global styles

CSS

    @media only screen and (max-width: 768px){
            .navbar-style > .navbar-brand {
        width: 55%;
        font-size: 13px;
        white-space: pre-line;
        text-align: center;
        padding-right: 26px;
    }
            .logo.navbar-brand {
                width: 50px;
                overflow: hidden;
                margin-left: 10px;
                margin-right: 10px;
            }
            .logo img {
                width: 245px;
            }
            button.cart-style.btn.btn-primary.btn-sm {
                border-radius: 50%;
                padding: 8px;
                height: 42px;
                width: 42px;
            }
            li.cart-wrapper.nav-item {
                position: relative;
            }
            span.badge-style.badge.badge-secondary {
                position: absolute;
                border-radius: 50%;
                font-size: 10px;
                height: 20px;
                width: 20px;
                text-align: center;
                padding: 0;
                line-height: 19px;
                right: -4px;
                top:-4px;
                background: red;

            }
ul.ml-auto.cart.navbar-nav {
    position: absolute;
    right: 5px;
    top: 15px;
}
}

您的渲染HTML（替换）

Changes: (Just added the className logo)

        <Container>
          <Navbar light expand="md" className="navbar-style">
            <NavbarToggler onClick={this.toggle} />
            <NavbarBrand className="logo" href="/">
              <img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" />
            </NavbarBrand>
            <NavbarBrand  href="/">The Big brand title will be displayed here !</NavbarBrand>
            <Collapse isOpen={this.state.isOpen} navbar>
              <Nav className="ml-auto" navbar>
                {links.map(createNavItem)}
              </Nav>
            </Collapse>
            <Nav className="ml-auto cart" navbar>
              <NavItem className="cart-wrapper">
                <Button className="cart-style" color="primary" size="sm">
                  Cart
                </Button>
                <Badge className="badge-style"> 10 </Badge>
              </NavItem>
            </Nav>
          </Navbar>
        </Container>

使用 Bootstrap (Reactstrap) 在单行中显示响应 header

Display responsive header in single line using Bootstrap (Reactstrap)

css

twitter-bootstrap

reactjs

bootstrap-4

reactstrap