如何在旋转木马上叠加搜索框？

时间：2015-07-06 08:44:09

标签： html css twitter-bootstrap

我有一个搜索框，我希望它覆盖在旋转木马上。就像它在图像中的显示方式一样。我可以通过定位搜索框Absolute来实现它。但它没有回应。随着宽度减小，它不会留在转盘内。如何使其响应？enter image description here

这是我的代码。

<div class="container-fluid search_bar"> 
        <row>
                <div class="col-xs-7 search">




        <div class="navbar nav1" role="navigation">

    <div class="navbar-header">

        <form class="navbar-form form1 "  role="search">
        <div class="">

            <input type="text" class="form_input" placeholder="Type Hospital Name" style="float:left; width: 27%; margin-top: 0; margin-right: 3%;" name="srch-term" id="srch-term">
            <select style="float: left; padding: 1px; width: 27%; margin-right: 3%;" class="selectbox1 form_input" >
                <option> Speciality </option>
                <option> Search in Health Packages </option>
                <option> Search in Diagnostic Centres </option>
                <option> Search in  Doctors </option>
                <option> Search in  Tests </option>
            </select>
            <input type="text" class="form_input" placeholder="Type Location" style="float:left; width: 27%; margin-right: 6" name="srch-term" id="srch-term">
                <button class="form_button" style="padding: 4px;" type="submit"><i class="glyphicon glyphicon-search"></i></button>
        </div>
                    </form>
        </div></div></div>




<div class="col-xs-5" style="border: none !important; ">
                <div class="social-media">
                    <ul class="list-unstyled list-inline">
                        <li> <img src="images/facebook.png" class="img-responsive" style="cursor: pointer;"/> </li>
                        <li> <img src="images/twitter.png" class="img-responsive" style="cursor: pointer;"/> </li>
                        <li> <img src="images/google.png" class="img-responsive" style="cursor: pointer;"/> </li>
                    </ul>
                </div>
            </div>
    </row>
    </div>



    <div class="col-xs-12">
                <div id="myCarousel" class="carousel slide slider" data-ride="carousel">
  <!-- Indicators 
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol> -->

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
        <img src="images/homeimage1.jpg" class="img-responsive" >
    </div>

    <div class="item">
      <img src="images/homeimage1.jpg" class="img-responsive" >
    </div>

    <div class="item">
      <img src="images/homeimage1.jpg" class="img-responsive">
    </div>

    <div class="item">
      <img src="images/homeimage1.jpg" class="img-responsive">
    </div>
  </div>

  <!-- Left and right controls -->

      <div class="right carousel-control" style="right: -5%; cursor: pointer;" href="#myCarousel" data-slide="next">
          <span> <img src="images/right.png" class="img-responsive"/></span>
    </div>
    <div class="left carousel-control" style="left: 4%; cursor: pointer;" href="#myCarousel" data-slide="prev">
        <span> <img src="images/left.png" class="img-responsive"/></span>
    </div>

</div>

    </div>

这里是CSS 

.search_bar {
    position: relative;
    top: 91px;
    left: 10%;
    /* margin-left: -0.5%; */
}
.search_bar1 {
    position: absolute;

    z-index: 3;
    margin-top: 8%;
    margin-left: 10% !important;
}

@media (max-width: 768px) {
.search_bar1 {
    margin-top: 0;
}
}

1 个答案:

答案 0 :(得分：0)

在搜索栏中显示的内容非常多，这会导致较小的设备出现问题，所以我在这里为您实现了一个可能的解决方案。基本上，在小显示屏上，搜索栏会将自己重新定位在旋转木马下。您会发现搜索栏会随着显示尺寸的变化作出反应。我已将您的社交媒体图标调整为坐在搜索选项下方的新行中，因为我认为它可以更好地利用可用空间。当然，很难确切知道你的要求是什么，但我希望这会有所帮助。如有任何问题，请告诉我。

＆＃13;
＆＃13; 
.navbar-header { width:100%; }
.search_bar {
    width:50%;
    position: absolute;
    z-index:1;
    top: 91px;
    left: 5%;
    /* margin-left: -0.5%; */
}

.search_bar select, .search_bar input, .search_bar button { float:left; margin-top:2px; }

@media (max-width: 500px) {
  .search_bar {
     position:relative;
     top:0;
     left:0;
     width:100%;
  }
}
＆＃13; 
<div class="col-xs-12">
  <div id="myCarousel" class="carousel slide slider" data-ride="carousel">
    <!-- Indicators 
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol> -->

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="images/homeimage1.jpg" class="img-responsive" >
      </div>
      <div class="item">
        <img src="images/homeimage1.jpg" class="img-responsive" >
      </div>

      <div class="item">
        <img src="images/homeimage1.jpg" class="img-responsive">
      </div>

      <div class="item">
        <img src="images/homeimage1.jpg" class="img-responsive">
      </div>
    </div>

    <!-- Left and right controls -->
    <div class="right carousel-control" style="right: -5%; cursor: pointer;" href="#myCarousel" data-slide="next">
      <span> <img src="images/right.png" class="img-responsive"/></span>
    </div>
    <div class="left carousel-control" style="left: 4%; cursor: pointer;" href="#myCarousel" data-slide="prev">
      <span> <img src="images/left.png" class="img-responsive"/></span>
    </div>
  </div>

<div class="container-fluid search_bar"> 
   <div class="row">
    <div class="col-xs-12 search">
      <div class="navbar nav1" role="navigation">
        <div class="navbar-header">
          <form class="navbar-form form1 "  role="search">
            <div class="">
              <input type="text" class="form_input" placeholder="Type Hospital Name" style="margin-top: 0; margin-right: 3%;" name="srch-term" id="srch-

term">
              <select style="float: left; padding: 3px; margin-right: 3%;" class="selectbox1 form_input" >
                <option> Speciality </option>
                <option> Search in Health Packages </option>
                <option> Search in Diagnostic Centres </option>
                <option> Search in  Doctors </option>
                <option> Search in  Tests </option>
              </select>
              <input type="text" class="form_input" placeholder="Type Location" style="margin-right:3%;" name="srch-term" id="srch-term">
              <button class="form_button" style="padding: 4px;" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
          </form>
        </div>
      </div>
    </div>
   </div>
   <div class="row">
     <div class="col-xs-12" style="border: none !important; ">
       <div class="social-media">
         <ul class="list-unstyled list-inline">
           <li> <img src="images/facebook.png" class="img-responsive" style="cursor: pointer;"/> </li>
           <li> <img src="images/twitter.png" class="img-responsive" style="cursor: pointer;"/> </li>
           <li> <img src="images/google.png" class="img-responsive" style="cursor: pointer;"/> </li>
          </ul>
         </div>
       </div>
     </div>
   </div>    
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题