Css 使用引导（Reactstrap）在单行中显示响应标头

我正在制作一个带有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>
    );
  }
}

品牌名称可以通过断线显示，如

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

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

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

请帮助我实现上面提到的结果，使标题显示在一行时，以响应方式查看

工作示例：

即使对于正常引导本身，我也面临着这个问题

纯引导参考：

下面给出的图片是我在使用MUI css的旧应用程序中已有的参考，但现在我需要用bootstrap替换它，并且需要与下面给出的屏幕截图完全相同的输出：

---

导航栏组件具有内置css flex wrap:wrap

  change wrap to nowrap: (overwrite css)

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

将wrap更改为nowrap：（覆盖css）

以下是根据您的问题要求提供的解决方案

您可以根据查询下方的req更改媒体查询屏幕大小 封面标签和手机，只需在您的全球风格pase下面的代码

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（替换）

更改：（刚刚添加了类名

徽标

）

大品牌名称将显示在这里！
{links.map（createNavItem）}
运货马车
10

谢谢您的帮助。。它是在单行中查看的，这是可以的。。但是我现在得到的是水平卷轴，因为标题更大，所以我想让标题也包含在我已经提到过的空间中。。响应视图不应具有任何水平滚动条。如果不需要水平滚动条，请使用宽度作为百分比（写入css，如宽度：“20%”）。但要确保它应该低于或等于100%。如切换按钮20%+品牌图标30%+标题30%+按钮徽章20%我已编辑了我的问题，请查看添加的屏幕截图，这是我的预期结果。我刚刚查看了您提到的更改，如果我在响应中切换切换器，则菜单不可见，在我提供的问题示例中已经可见，对于切换，不要提及任何宽度。此外，您还需要为手机和桌面维护两个不同的UI。欢迎使用SO！问题是你不能在一个响应视图中调整所有这些div，因为设备的宽度可能是最好的解决方案是btn+徽标+购物车在一行，在主标题下，如果你需要，我可以向你展示这个不，我已经有一个旧的应用程序，它是在一行中使用MUI css制作的。。但是现在我需要用纯引导来做这件事。你能给我们看一个that@Awais，我添加了相同的屏幕截图。。请仔细看看。@Awais，你能帮我制作上面提到的截图吗？没关系，它可以是纯css格式，下面提供的解决方案会导致切换菜单出现故障。。那么你能帮我找到像这张图片一样的东西吗？谢谢你的帮助。。我在这里试过你的解决方案一切都很好。。但是，在切换购物车按钮时，也会切换，但它不应该这样做。。它是独立于可折叠菜单的，应该是独立的。很抱歉，我没有测试它，更新了我的代码。请检查html中添加的calss

cart

，并将其设置为顶部样式

    @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;
}
}

        <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>