引导程序:横幅广告必须固定宽度为1350像素,并且中心在1400像素宽度之后对齐,并且两侧均具有背景色

Abdul Qhayum |

我在流体容器内有一个横幅,但是我希望横幅宽度在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;
   }
珍妮佛·米歇尔(Jennifer Michelle)

如果我正确理解了您的问题,则应添加以下CSS:

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

Related 相关文章

热门标签

归档