如何用Bootstrap和React.js实现OLX同款搜索栏宽度拉伸？

Hey there! Let's get that search input looking exactly like OLX's original layout. After reviewing your code, I spot a few quick tweaks we can make to fix the width issue and align everything properly.

Key Issues in Your Current Code #

• Your .search input has a fixed width: 100px that's forcing it to stay tiny
• The navbar structure isn't using Bootstrap's flex capabilities to let the search area fill available space
• The input/button border-radius doesn't match OLX's seamless rounded-corner style

Fixed Code (JSX + CSS) #

First, update your CSS to adjust sizing, spacing, and styling:

.logo { 
  width: 50px; 
  margin-right: 20px; 
}
.logo img { 
  width: 100%; 
}

/* Make location and search groups flex-friendly */
.location {
  flex: 0 0 auto;
}
.search {
  flex: 1 1 auto; /* This makes the search group take all remaining space */
  margin-left: 1rem;
}

/* Style inputs to match OLX's look */
.location input, .search input {
  background-color: #fff;
  border: 2px #002f34 solid;
  border-radius: 5px 0 0 5px; /* Left rounded, right sharp to connect with button */
  height: 100%;
}

/* Style search buttons to blend with inputs */
.location .ico, .search .ico {
  padding: 10px 15px;
  background-color: #002f34 !important; /* OLX's signature teal, not black */
  color: #fff;
  border: none;
  border-radius: 0 5px 5px 0; /* Right rounded, left sharp */
  height: 100%;
}

.sell { 
  padding: 8px 20px; 
  border: 3px #ffa500 solid; 
  color: #002f34; 
  text-align: center; 
  background: #fff; 
  border-radius: 30px; 
  box-shadow: 0px 3px 5px #a9a9a9; 
  font-weight: bold;
}
.login { 
  padding-right:10px; 
  text-decoration: underline; 
  font-size: 18px; 
  font-weight: bold; 
  color: #002f34;
  cursor: pointer;
  margin-bottom: 0;
}

/* Adjust navbar flex behavior for proper alignment */
.navbar-nav {
  flex: 1;
  display: flex;
  align-items: center;
}

Then update your JSX structure to improve layout flow and responsiveness:

<nav className="navbar navbar-expand-lg navbar-light bg-light py-3">
  <a className="navbar-brand logo" href="#">
    <img src={require("../ui/logo.png")} alt="OLX Logo" />
  </a>
  {/* Add missing toggler button for mobile responsiveness */}
  <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span className="navbar-toggler-icon"></span>
  </button>

  <div className="collapse navbar-collapse" id="navbarSupportedContent">
    <ul className="navbar-nav mr-auto">
      {/* Wrap input groups in a flex container to align them properly */}
      <div className="d-flex align-items-center w-100">
        <div className="input-group location">
          <input type="text" className="form-control" placeholder="Pakistan" />
          <div className="input-group-append">
            <button className="fas fa-search ico"></button>
          </div>
        </div>
        <div className="input-group search">
          <input type="text" className="form-control" placeholder="Find Mobile, Car, Laptop" />
          <div className="input-group-append">
            <button className="fas fa-search ico"></button>
          </div>
        </div>
      </div>
    </ul>
    <form className="form-inline my-2 my-lg-0 align-items-center">
      <h6 className="mr-sm-2 login">Login</h6>
      <button className="my-2 my-sm-0 fas fa-plus sell" type="button">&nbsp; SELL</button>
    </form>
  </div>
</nav>

What Changed? #

1. Flex Sizing: Added flex: 1 1 auto to the .search class so it automatically fills all remaining space in the navbar
2. Fixed Width Removal: Removed the hardcoded width:100px from the search input to let it expand naturally
3. Seamless Styling: Adjusted border-radius for inputs and buttons to match OLX's connected rounded-corner look, and updated the button color to OLX's teal
4. Responsive Alignment: Wrapped input groups in a flex container and added vertical alignment classes to ensure all navbar elements line up correctly
5. Mobile Support: Added the missing navbar toggler button for proper mobile behavior

This should make your search input stretch exactly like OLX's original layout while keeping all existing functionality intact.

内容的提问来源于stack exchange，提问作者Waqas Umer