Question

我正在设计一个适用于桌面的应用程序

但是在移动设备的情况下，表单字段不会进入下一行。

在移动设备上，所有字段似乎都被截断了。我希望他们带来下一行，如这是我的表单元素

<div class="inner cover">

                    <p class="lead">&nbsp;</p>

                     <form class="form-inline" method="get" action="search.html"   id="search-hotel-form">
                        <a href="#" id="find" style="display:none;">Find</a>
                        <div class="input-group input-group-sm" style="margin:auto;">

                            <select class="selectpicker form-control input-lt" tvalue="" id="city">
                                <option value="null" selected="selected">Your location</option>
                                <option value="delhi">X</option>
                                <option value="gurgaon">Y</option>
                            </select>
                            <span class="input-group-btn" style="width:0px;"></span>
                            <div style="position:relative;"><input id="datetimepicker" type="text" class="form-control input-sm" placeholder="Check In" style="margin-left:-2px;"/></div>
                            <input type='text' tvalue="" id="datetimepicker1" hidden="hidden"/>
                            <span class="input-group-btn" style="width:0px;"></span>
                            <select class="selectpicker form-control" style="margin-left:-1px;" id="checkout">
                                <option value="0" selected="selected">Stay Hours</option>
                                <option value="1">X</option>
                                <option value="2">Y</option>
                            </select>
                            <input type='text' tvalue="" id="datetimepicker2" hidden="hidden"/>
                            <span class="input-group-btn" style="width:0px;"></span>
                            <select class="selectpicker form-control" style="margin-left:-2px;" th:field="*{adults}" id="guest">
                                <option value="0" selected="selected">No. of guests</option>
                                <option value="1">1 student</option>
                                <option value="2">2 student</option>

                            </select>
                            <span class="input-group-btn" style="width:0px;"></span>
                            <button type="text" class="form-control btn btn-success" style="margin-left:-1px;">Find the Best Hotels &raquo;</button>
                        </div>
                    </form>
                    <div class="map_canvas" style="display:none; width:400px; height:300px;"></div>
                </div>

我为此写的

和css是

   /*
 * Globals
 */

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritence from `body` */
  background-color: #fff;
  border: 1px solid #fff;
}


/*
 * Base structure
 */

html,
body {
  height:  100%;
  background-color: #333;
  background-image: url('/resources/img/home.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}
body {
  color: #fff;
  text-align: center;
  text-shadow: none; //0 1px 2px rgba(0,0,0,.3);
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
  -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.3);
          box-shadow: inset 0 0 100px rgba(0,0,0,.3);
}
.site-wrapper-inner {
  display: table-cell;
  vertical-align: top;
}
.cover-container {
  margin-right: auto;
  margin-left: auto;
}

/* Padding for spacing */
.inner {
  padding: 30px;
}


/*
 * Header
 */
.masthead-brand {
  margin-top: 10px;
  margin-bottom: 10px;
}

.masthead-nav > li {
  display: inline-block;
}
.masthead-nav > li + li {
  margin-left: 20px;
}
.masthead-nav > li > a {
  padding-right: 0;
  padding-left: 0;
  font-size: 16px;
  font-weight: normal;
  color: #fff; /* IE8 proofing */
  color: rgba(255,255,255,1);
  border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
  background-color: transparent;
  border-bottom-color: #fff;
  border-bottom-color: rgba(255,255,255,.3);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
  color: #fff;
  border-bottom-color: #fff;
}
.btn-home {
  background: rgba(0,0,0,0);
  color: #fff;
  font-weight: normal !important;
}

.input-group input,
.input-group select {
  width: 72px !important;
}

.input-group input,
.input-group select {
  background-color: rgba(255,255,255,0.8) !important;
  border: none !important;
  border-radius: 0;
  -webkit-appearance: none;
}

.input-group > .input-lt {
    border-radius: 4px 0 0 4px !important;
}

.input-group > .input-rt {
    border-radius: 0 4px 4px 0 !important;
}

@media (min-width: 768px) {
  .masthead-brand {
    float: left;
  }
  .masthead-nav {
    float: right;
  }
}


/*
 * Cover
 */

.cover {
  padding: 0 20px;
}
.cover .btn-lg {
  padding: 10px 20px;
  font-weight: normal;
}


/*
 * Footer
 */

.mastfoot {
  color: #999; /* IE8 proofing */
  color: rgba(255,255,255,.5);
}


/*
 * Affix and center
 */

@media (min-width: 768px) {
  /* Pull out the header and footer */
  .masthead {
    position: fixed;
    top: 0;
  }
  .mastfoot {
    position: fixed;
    bottom: 0;
  }
  /* Start the vertical centering */
  .site-wrapper-inner {
    vertical-align: middle;
  }
  /* Handle the widths */
  .masthead,
  .mastfoot,
  .cover-container {
    width: 100%; /* Must be percentage or pixels for horizontal alignment */
  }
  .input-group .form-control {
    width: 120px !important;
  }
}

@media (min-width: 992px) {
  .masthead,
  .mastfoot,
  .cover-container {
    width: 100%;
  }

  .input-group .form-control {
    width: 160px !important;
  }

  .input-group .input-lt {
    width: 320px !important;
  }
}

.shadowed {
    -webkit-filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.2));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

.selectpicker {
  color: grey;
}
select option:first-child {
  color: grey;
  display: none;
}
select option {
  color: #555;
}

我正在使用bootstrap。请有人指导我在移动设备的下一行制作表格字段。

Answer 1

在移动媒体查询中，提供

input {
    display: block;
}

这将使它们出现在下一行

Answer 2

至少有一个问题是您的整个表单位于class="input-group input-group-sm"内，这限制了方向的任何更改。

内嵌样式也已删除。

也许这会有所帮助，可能取决于您的整体布局或页面上可能包含的其他元素。

/*
 * Globals
 */

/* Links */
 a, a:focus, a:hover {
    color: #fff;
}
/* Custom default button */
 .btn-default, .btn-default:hover, .btn-default:focus {
    color: #333;
    text-shadow: none;
    /* Prevent inheritence from `body` */
    background-color: #fff;
    border: 1px solid #fff;
}
/*
 * Base structure
 */
 html, body {
    height: 100%;
    background-color: #333;
    background-image: url('http://img0.gtsstatic.com/wallpapers/f11634bfd85724cc44858fa49c489167_large.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}
body {
    color: #fff;
    text-align: center;
    text-shadow: none;
    //0 1px 2px rgba(0, 0, 0, .3);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
 .site-wrapper {
    display: table;
    width: 100%;
    height: 100%;
    /* For at least Firefox */
    min-height: 100%;
    -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, .3);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, .3);
}
.site-wrapper-inner {
    display: table-cell;
    vertical-align: top;
}
.cover-container {
    margin-right: auto;
    margin-left: auto;
}
/* Padding for spacing */
 .inner {
    padding: 30px;
}
/*
 * Header
 */
 .masthead-brand {
    margin-top: 10px;
    margin-bottom: 10px;
}
.masthead-nav > li {
    display: inline-block;
}
.masthead-nav > li + li {
    margin-left: 20px;
}
.masthead-nav > li > a {
    padding-right: 0;
    padding-left: 0;
    font-size: 16px;
    font-weight: normal;
    color: #fff;
    /* IE8 proofing */
    color: rgba(255, 255, 255, 1);
    border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover, .masthead-nav > li > a:focus {
    background-color: transparent;
    border-bottom-color: #fff;
    border-bottom-color: rgba(255, 255, 255, .3);
}
.masthead-nav > .active > a, .masthead-nav > .active > a:hover, .masthead-nav > .active > a:focus {
    color: #fff;
    border-bottom-color: #fff;
}
.btn-home {
    background: rgba(0, 0, 0, 0);
    color: #fff;
    font-weight: normal !important;
}
.cover .btn-lg {
    padding: 10px 20px;
    font-weight: normal;
}
.selectpicker {
    color: grey;
}
select option:first-child {
    color: grey;
    display: none;
}
select option {
    color: #555;
}
.no-gutter >[class*='col-'] {
    padding-right: 0;
    padding-left: 0;
}
/*
 * Footer
 */
 .mastfoot {
    color: #999;
    /* IE8 proofing */
    color: rgba(255, 255, 255, .5);
}
.form-control, .form-control:focus {
    box-shadow: none;
    font-size: 12px !important;
}
input, select, select option {
    background-color: rgba(255, 255, 255, 0.8) !important;
    color: #555 !important;
    border: none !important;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
@media (min-width: 768px) {
    .form-control.input-lt {
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 4px 0 0 4px !important;
    }
    .form-control.input-rt {
        border: none !important;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 0 4px 4px 0 !important;
        border-top: 1px solid #5cb85c;
        border-right: 1px solid #5cb85c;
        border-bottom: 1px solid #5cb85c;
    }
    .form-control.input-rt:hover, .form-control.input-rt:focus {
        border: none !important;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 0 4px 4px 0 !important;
        border-top: 1px solid #449d44;
        border-right: 1px solid #449d44;
        border-bottom: 1px solid #449d44;
    }
    .input-ct::-webkit-input-placeholder {
        color: #555 !important;
    }
    .input-ct:-moz-placeholder {
        /* Firefox 18- */
        color: #555 !important;
    }
    .input-ct::-moz-placeholder {
        /* Firefox 19+ */
        color: #555 !important;
    }
    .input-ct:-ms-input-placeholder {
        color: #555 !important;
    }
    .form-control.input-ct {
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 0 !important;
    }
    .masthead-brand {
        float: left;
    }
    .masthead-nav {
        float: right;
    }
    /* Pull out the header and footer */
    .masthead {
        position: fixed;
        top: 0;
    }
    .mastfoot {
        position: fixed;
        bottom: 0;
    }
    /* Start the vertical centering */
    .site-wrapper-inner {
        vertical-align: middle;
    }
    /* Handle the widths */
    .masthead, .mastfoot, .cover-container {
        width: 100%;
        /* Must be percentage or pixels for horizontal alignment */
    }
}
@media (max-width: 768px) {
    .form-control.input-lt {
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 4px 4px 0 0 !important;
    }
    .form-control.input-rt {
        border: none !important;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 0 0 4px 4px !important;
        border-left: 1px solid #5cb85c;
        border-right: 1px solid #5cb85c;
        border-bottom: 1px solid #5cb85c;
    }
    .form-control.input-rt:hover, .form-control.input-rt:focus {
        border: none !important;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 0 0 4px 4px !important;
        border-left: 1px solid #449d44;
        border-right: 1px solid #449d44;
        border-bottom: 1px solid #449d44;
    }
    .form-control.input-ct {
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 0 !important;
    }
    .container.cover {
        padding: 0 40px;
    }
    .input-ct::-webkit-input-placeholder {
        padding-left: 5px;
        color: #555 !important;
    }
    .input-ct:-moz-placeholder {
        /* Firefox 18- */
        padding-left: 5px;
        color: #555 !important;
    }
    .input-ct::-moz-placeholder {
        /* Firefox 19+ */
        padding-left: 5px;
        color: #555 !important;
    }
    .input-ct:-ms-input-placeholder {
        padding-left: 5px;
        color: #555 !important;
    }
}
@media (min-width: 992px) {
    .masthead, .mastfoot, .cover-container {
        width: 100%;
    }
}
.shadowed {
    -webkit-filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.2));
    filter: url(#drop-shadow);
    -ms-filter:"progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter:"progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container cover">
  <p class="lead">&nbsp;</p>
  <form class="form-horizontal" method="get" action="search.html" id="search-hotel-form"> <a href="#" id="find" style="display:none;">Find</a>

    <div class="row no-gutter">
      <div class="col-sm-3">
        <select class="selectpicker form-control input-lt" tvalue="" id="city">
          <option value="null" selected="selected">Your location</option>
          <option value="delhi">X</option>
          <option value="gurgaon">Y</option>
        </select> <span class="input-group-btn"></span> 
      </div>
      <div class="col-sm-2">
        <input id="datetimepicker" type="text" class="form-control input-ct" placeholder="Check In" />
        <input type="text" tvalue="" id="datetimepicker1" hidden="hidden" /> <span class="input-group-btn"></span> 
      </div>
      <div class="col-sm-2">
        <select class="selectpicker form-control input-ct" id="checkout">
          <option value="0" selected="selected">Stay Hours</option>
          <option value="1">X</option>
          <option value="2">Y</option>
        </select>
        <input type="text" tvalue="" id="datetimepicker2" hidden="hidden" /> <span class="input-group-btn"></span> 
      </div>
      <div class="col-sm-2">
        <select class="selectpicker form-control input-ct" th:field="*{adults}" id="guest">
          <option value="0" selected="selected">No. of Guests</option>
          <option value="1">1 student</option>
          <option value="2">2 student</option>
        </select> <span class="input-group-btn"></span> 
      </div>
      <div class="col-sm-3">
        <button type="text" class="form-control btn btn-success input-rt">Find the Best Hotels &raquo;</button>
      </div>
    </div>
  </form>
  <div class="map_canvas" style="display:none; width:400px; height:300px;"></div>
</div>

表格文件不会在手机上下一行

2 个答案: