Question

我在流体容器内有一个横幅，但我希望横幅宽度在1400px宽度和中心对齐后固定。我不希望它延伸到更多。有一个简单的方法吗？

这是我的HTML

<div class="container-fluid blue_back">
<div class="container-fluid ">
   <div class="row banner-content">


        <div class="col-md-12">
           <div class="row nav1 search search_bar1" role="navigation">
                    <div class="container-fluid">
                <div class="navbar-header navbar_search">

                  <form class="navbar-form form1 "  role="search">
                     <select  class="selectbox1 form_input" >
                        <option> Search in Hospitals </option>
                        <option> Search in Packages </option>
                        <option> Search in Diagnostics </option>
                        <option> Search in  Doctors </option>
                        <option> Search in  Tests </option>
                    </select>

                     <input type="text" class="form_input" placeholder="Type Hospital Name"  name="srch-term" id="srch-term">
                     <input type="text" class="form_input" placeholder="Type Location" name="srch-term" id="srch-term">
                     <input type="text" class="form_input" placeholder="Type Speciality" name="srch-term" id="srch-term">
                     <button class="form_button"   type="submit"></button>
                  </form>
                </div>
                    </div>        
             </div>
          <div class="row social_media aa">

             <input type="submit" value="Book Appointment" class="appointment_book_home" />
           <input type="submit" value="" class="search_book_home"/>
           <ul class="list-inline list-unstyled social_media_icons">
               <li><a href="#"><img src="images/facebook.png"/> </a></li>
               <li><a href="#"><img src="images/google.png"/> </a></li>
               <li><a href="#"><img src="images/twitter.png"/> </a></li>
           </ul>

       </div>
          <div class="row statistics_home">
       <div class="col-xs-4 dashed_border">

            <div class="row">
                <div class="col-sm-2 stat_image">
                    <img src="images/List/hospital_icon_menu.png"/>
                </div>
                <div class="col-sm-10 ">
                    <div class="row">
                        <h3 class="statistics_head"> 800+ </h3>
                    </div>
                    <div class="row">
                    <h4 class="statistics_text"> Health Centres </h4>
                    </div>
                </div>
            </div>
            </div>
          <div class="col-xs-4 dashed_border">

            <div class="row">
                <div class="col-sm-2 stat_image">
                    <img src="images/List/hospital_icon_menu.png"/>
                </div>
                <div class="col-sm-10 ">
                    <div class="row">
                        <h3 class="statistics_head"> 800+ </h3>
                    </div>
                    <div class="row">
                    <h4 class="statistics_text"> Packages and Tests </h4>
                    </div>
                </div>
            </div>
            </div>
        <div class="col-xs-4 dashed_border" style="border: none;">

            <div class="row">
                <div class="col-sm-2 stat_image">
                    <img src="images/List/hospital_icon_menu.png"/>
                </div>
                <div class="col-sm-10 ">
                    <div class="row">
                        <h3 class="statistics_head"> 800+ </h3>
                    </div>
                    <div class="row">
                    <h4 class="statistics_text"> Doctors </h4>
                    </div>
                </div>
            </div>
            </div>

    </div>

   </div>
</div>
   </div>
</div>

这是我的CSS

.banner-content {
   background: url('http://localhost:8383/Buzz_HomePage/images/homeimage1.jpg') no-repeat center center;
   background-size: cover;
   height: 290px;
   }

Answer 1

如果我理解你的问题，你应该添加这个css：

.banner-content {
 width:100%;
 max-width:1350px;
 margin:0 auto;
}

如果您需要更多帮助，可以尝试发布JSfiddle。

Bootstrap：横幅必须具有1350px的固定宽度，并且在1400px宽度后中心对齐，并且两侧都有背景颜色

1 个答案: