Question

我正在尝试创建一个内联表单，但它没有正确的样式。

以下是我正在使用的代码：

body {
  background-color: #a7cdf2;
}

#map {
  height: 70%;
}

<!DOCTYPE html>
<html>
<head>
  <link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="/static/css/bootstrap-responsive.min.css" rel="stylesheet">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="/static/js/bootstrap.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <form class="inline" action="" method="post" name="search">
    <input id="csrf_token" name="csrf_token" type="hidden" value="xxx">
      <datalist id="id_datalist">
        <option value="CLARENVILLE, CA">
    </datalist>
    <div class="form-group">
      <label for="origin">Origin:</label>
      <input class="form-control" id="origin" list="id_datalist" name="origin" size="40" type="text" value="SHANGHAI, CN">
    </div>
    <div class="form-group">
      <label for="speed">Speed (knots):</label>
      <input class="form-control" id="speed" name="speed" size="5" type="text" value="14.0">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</body>
</html>

这是Chrome中呈现的方式：

Answer 1

看来你的boostrap链接不正确......我玩了你的代码并替换了链接，它工作正常。看起来您将下载的文件放在错误的位置，或者您找到的示例可能不清楚。当src具有类似TYPING的值时，它正在查看托管该站点的服务器上的文件。也许您应该使用CDN链接？

/static/css/bootstrap.min.css

＆＃13;

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

＆＃13;

body {
  background-color: #a7cdf2;
}

#map {
  height: 70%;
}

＆＃13;

boostrap内联形式没有造型

1 个答案: