bootstrap问题：图像溢出

Question

这是我的标记：

  <form action="data.php" method="post">
        <h4>Start date:</h4>
        <input name="start" id="start" style="width: 100%;" value="" />

        <h4 style="margin-top: 2em">End date:</h4>
        <input name="end" id="end" style="width: 100%;" value=""/>
   <input name="submit" type="submit"  >
      </form>

将如下所示：

然而问题是 - 当缩小浏览器宽度时，它会变成这样：

图像会溢出其容器，尽管它应该响应.. 任何想法有什么不对？

感谢

Answer 1

将红色和灰色div包装在DIV标签中，而不是链接中。为您的包含div提供以下样式：

final URL url = new URLBuilder().withPath("/basePath/servicePath/")
        .withQueryParam("param", "paramValue")
        .buildURL();

Answer 2

您缺少父类.container表单引导程序。看看bootstrap docs

.container {
  border: 1px grey solid
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="row">
        <a href="#">
          <div class="col-md-6 col-xs-6">
            <img class="img-responsive" src="///dummyimage.com/300x600">
          </div>
          <div class="col-md-6 col-xs-6 vorteil">
            text
          </div>
        </a>
      </div>
    </div>
    <! -- plus 3 more items -->
  </div>
</div>