在智能手机上查看时，引导行项目相互碰撞

时间：2017-09-24 20:54:50

标签： twitter-bootstrap

当我在移动设备上查看它时，我有一行它的项目正在运行，我不知道如何将这两个项目叠加到移动设备上

以下是移动设备上的内容 on mobile

正如你在第一行看到的那样，它与另一个相遇，实际上它应该与State叠加，然后在它下面的County。知道我做错了什么吗？我对Bootstrap来说并不是那么好

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div>
  <div class="form-horizontal">

    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

        <div class="form-group">
          <label for="ddState" class="col-md-1 col-sm-1 col-xs-2 col-md-offset-1 control-label">State</label>
          <div class="col-md-2 col-sm-2 col-xs-2">
            <input id="ddState" />
          </div>

          <label for="ddCounty" class="col-md-1 col-sm-1 col-xs-2 control-label">County</label>
          <div class="col-md-2 col-sm-4 col-xs-4">
            <div id="ddCounty" class="form-control"></div>
          </div>


        </div>

      </div>
    </div>
    <!-- End State County-->

    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="form-group">
          <label for="ddDepartment" class="col-md-1 col-sm-2 col-xs-2 col-md-offset-1 control-label">Department</label>
          <div class="col-md-5 col-sm-4 col-xs-10">
            <div id="ddDepartment" class="form-control"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- End Department-->

    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="form-group">
          <label for="ddDistrict" class="col-md-1 col-sm-2 col-xs-2 col-md-offset-1 control-label">District</label>
          <div class="col-md-5 col-sm-4 col-xs-10">
            <div id="ddDistrict" class="form-control"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- End District -->

    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="form-group">
          <label for="txtReporter" class="col-md-1 col-sm-2 col-xs-2 col-md-offset-1 control-label">Reporter</label>
          <div class="col-md-5 col-sm-4 col-xs-10">
            <input type="text" id="txtReporter" class="form-control" style="max-width:100%" />
          </div>
        </div>
      </div>
    </div>
    <!-- End Reporting Party -->

    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="form-group">
          <label for="txtAddress" class="col-md-1 col-sm-2 col-xs-2 col-md-offset-1 control-label">Address</label>
          <div class="col-md-5 col-sm-4 col-xs-10">
            <input type="text" id="txtAddress" class="form-control" style="max-width:100%" />
          </div>
        </div>
      </div>
    </div>
    <!-- End Address -->

    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="form-group">
          <div id="Cancel" class="col-md-offset-2 col-md-2 col-xs-offset-2">
            <div class="form-control" style="background-color:#1D5F86; color:white; font-weight:bold">
              <center>Cancel</center>
            </div>
          </div>
          <div class="col-md-offset-1 col-md-2 col-xs-offset-1">
            <div class="form-control" style="background-color:#963146; color:white; font-weight:bold">
              <center>Submit</center>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

1 个答案:

答案 0 :(得分：0)

我稍微更新了标记。希望这会有所帮助。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">
   @media only screen and (max-width : 768px) {
		.topMargin{
			margin-top: 10px;
		}
	}
</style>

<div class="container">

	<div class="row form-group">
		<div class="col-md-2 col-sm-2 col-xs-12"><label for="ddState" class="control-label">State</label></div>
		<div class="col-md-4 col-sm-4 col-xs-12"><input id="ddState" /></div>

		<div class="col-md-2 col-sm-2 col-xs-12 topMargin"><label for="ddCounty" class="control-label">County</label></div>
		<div class="col-md-4 col-sm-4 col-xs-12">
			<div id="ddCounty" class="form-control"></div>
		</div>
	</div>

	<div class="row form-group">
		<div class="col-md-2 col-sm-2 col-xs-12"><label for="ddDepartment" class="control-label">Department</label></div>
		<div class="col-md-10 col-sm-10 col-xs-12">
			<div id="ddDepartment" class="form-control"></div>
		</div>
	</div>

	<div class="row form-group">
		<div class="col-md-2 col-sm-2 col-xs-12"><label for="ddDistrict" class="control-label">District</label></div>
		<div class="col-md-10 col-sm-10 col-xs-12">
			<div id="ddDistrict" class="form-control"></div>
		</div>
	</div>

	<div class="row form-group">
		<div class="col-md-2 col-sm-2 col-xs-12"><label for="txtReporter" class="control-label">Reporter</label></div>
		<div class="col-md-10 col-sm-10 col-xs-12"><input type="text" id="txtReporter" class="form-control" style="max-width:100%" /></div>
	</div>

	<div class="row form-group">
		<div class="col-md-2 col-sm-2 col-xs-12"><label for="txtAddress" class="control-label">Address</label></div>
		<div class="col-md-10 col-sm-10 col-xs-12"> <input type="text" id="txtAddress" class="form-control" style="max-width:100%" /></div>
	</div>

	<div class="row form-group">
		<div id="Cancel" class="col-md-6 col-sm-6 col-xs-12">
			<div class="form-control" style="background-color:#1D5F86; color:white; font-weight:bold">
				<center>Cancel</center>
			</div>
		</div>
		<div class="col-md-6 col-sm-6 col-xs-12">
			<div class="form-control" style="background-color:#963146; color:white; font-weight:bold">
				<center>Submit</center>
			</div>
		</div>
	</div>

</div>

相关问题
最新问题