为什么从Bootstrap 3.3.6切换到3.3.7会破坏用户界面？
以下是在Bootstrap 3.3.6和3.3.7
下运行的应用页面的两张图片 
为了记录，我的应用程序是一个带有Thymeleaf，JQuery和Bootstrap的Springboot应用程序。如果可能的话，我宁愿使用最新版本的Bootstrap。 这是有问题的html页面：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:fragment="header">
<meta charset="utf-8"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="icon" href="/werewolf-512.png"></link>
<link rel="stylesheet" type="text/css" href="/css/style.css" th:href="@{/css/style.css}"></link>
<link rel="stylesheet" type="text/css" href="/css/font-awesome.css" th:href="@{/css/font-awesome.css}"></link>
<!-- Bootstrap & JQuery -->
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.7/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"></link>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.7/css/bootstrap-theme.min.css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap-theme.min.css}"></link>
<script type="application/javascript" src="http://cdn.jsdelivr.net/webjars/jquery/2.2.1/jquery.min.js" th:src="@{/webjars/jquery/2.2.1/jquery.min.js}"></script>
<script type="application/javascript" src="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.7/bootstrap.min.js" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.js}"></script>
<script type="application/javascript" src="https://cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.js" th:src="@{/webjars/jquery-ui/1.11.4/jquery-ui.min.js}"></script>
<script type="application/javascript" src="/ckeditor/ckeditor.js"></script> <!-- th:src="@{/webjars/ckeditor/4.5.8/standard/ckeditor.js}"></script> -->
<script src="/ckeditor/gameserver/js/sample.js"></script>
<link rel="stylesheet" type="text/css" href="/ckeditor/gameserver/css/samples.css"></link>
<link rel="stylesheet" type="text/css" href="/ckeditor/gameserver/toolbarconfigurator/lib/codemirror/neo.css"></link>
<title th:text="#{editCampaign.title}">Title</title>
<script th:inline="javascript">
$(document).ready(function() {
$( window ).load(function() {
var unselectedList = $("#unselectedTags")[0].value;
var unselectedTagList = null;
if (unselectedList.length > 0) {
unselectedTagList = jQuery.parseJSON(unselectedList);
} else {
unselectedTagList= [];
}
var selectedList = $("#selectedTags")[0].value;
var selectedTagList = null;
if (selectedList.length > 0) {
selectedTagList = jQuery.parseJSON(selectedList);
} else {
selectedTagList = [];
}
$.each(unselectedTagList, function(i, item) {
var name = item["name"];
var id = item["id"];
var newButton = $('<button type="button"/>')
.text(name)
.click( function() {
$("#addTag").val(id);
$("#editFolioForm").attr("action", "/shared/addRemoveTag");
$("#editFolioForm").submit();
})
.addClass("btn btn-default add-btn")
.attr('id', id)
.attr('name', name)
.appendTo($("#unselectedTagSpan"));
});
$.each(selectedTagList, function(i, item) {
var name = item["name"];
var id = item["id"];
if (name == "Campaign Description") {
var newButton = $('<button type="button"/>')
.text(name)
.attr("disabled", "true")
.addClass("btn btn-default add-btn")
.attr('id', id)
.attr('name', name)
.appendTo($("#selectedTagSpan"));
} else {
var newButton = $('<button type="button"/>')
.text(name)
.click( function() {
$("#removeTag").val(id);
$("#editFolioForm").attr("action", "/shared/addRemoveTag");
$("#editFolioForm").submit();
})
.addClass("btn btn-default add-btn")
.attr('id', id)
.attr('name', name)
.appendTo($("#selectedTagSpan"));
}
});
if ($("#isOwner").val() == "true") {
var users = $("#users")[0].value;
var userList = null;
if (users.length > 0) {
userList = jQuery.parseJSON(users);
}
$.each(userList, function(i, item) {
var name = item["userName"];
var id = item["userId"];
var rowDiv = $('<div/>');
var access;
if (item["itemPermission"] == "PERMISSION_OWNER") {
access = "Owner";
} else if (item["itemPermission"] == "PERMISSION_READ_WRITE") {
access = "Read/Write";
} else if (item["itemPermission"] == "PERMISSION_READ") {
access = "Read";
} else {
// in this case item["itemPermission"] == "NO_PERMISSION"
access = "No Access";
}
var button = $('<input id="'+id+'" type="button" class="permission" onclick="modifyPermission("'+id+'")"/>')
.prop("value", access);
button.appendTo(rowDiv);
var spacerDiv = $('<div class="small-spacer"/>');
spacerDiv.appendTo(rowDiv);
var label = $('<label class="input-margin"/>')
.text(name);
label.appendTo(rowDiv);
rowDiv.appendTo("#permissionList")
});
} else {
$("#permissionLabel").addClass("hide");
$("#permissionList").addClass("hide");
}
});
if ($("#folioId").val() == "") {
$("#copyBtn").attr("hidden", "true");
}
$("#editFolioForm").submit(function(event) {
var permissionMap = {};
var buttonMap = {};
var buttonData = [];
$('.permission').each(function(i, btn) {
var value = $(this).attr("value");
var id = $(this).attr("id");
item = {};
item["id"] = id;
item["value"] = value;
buttonData.push(item);
buttonMap[id] = value;
});
console.log(buttonData);
var usersObject = JSON.parse($("#users").val());
$.each(usersObject, function(i, item) {
var userId = item["userId"];
var newPermission = buttonMap[userId];
if (newPermission == "Owner") {
item["itemPermission"] = "PERMISSION_OWNER";
} else if (newPermission == "Read/Write") {
item["itemPermission"] = "PERMISSION_READ_WRITE";
} else if (newPermission == "Read") {
item["itemPermission"] = "PERMISSION_READ";
} else {
item["itemPermission"] = "NO_ACCESS";
}
});
var newUserString = JSON.stringify(usersObject)
$("#users").val(newUserString);
});
$("#changeView").click(function() {
var cvValue = $("#changeView").attr("value");
if (cvValue == "View as HTML") {
var data = CKEDITOR.instances.editor.getData();
$("#viewContainer").html(data);
$("#viewContainer").removeClass("hide");
$("#editorContainer").addClass("hide");
$("#changeView").attr("value", "Edit");
if ($("#isOwner").val() == "true") {
$("#permissionLabel").addClass("hide");
$("#permissionList").addClass("hide");
}
$("#submitBtn").addClass("hide");
} else {
$("#viewContainer").addClass("hide");
$("#editorContainer").removeClass("hide");
$("#changeView").attr("value", "View as HTML");
if ($("#isOwner").val() == "true") {
$("#permissionLabel").removeClass("hide");
$("#permissionList").removeClass("hide");
}
$("#submitBtn").removeClass("hide");
}
});
$("#copyBtn").click(function(e) {
e.preventDefault();
$("#folioId").val("");
$("#folioStatus").text("You are editing a copied document");
$("#pageTitle").val("");
});
});
</script>
<script th:inline="javascript">
function selectFolio() {
window.location = "/shared/selectFolio?operation=edit";
}
function modifyPermission(buttonId) {
var button = $("#"+buttonId);
var selection = button.attr("value");
if (selection == "No Access") {
button.prop("value", "Read");
} else if (selection == "Read") {
button.prop("value", "Read/Write");
} else if (selection == "Read/Write") {
button.prop("value", "Owner");
} else {
button.prop("value", "No Access");
}
}
</script>
<script>
$(function() {
$("#addTagDialog" ).dialog({
autoOpen: false,
buttons: {
OK: function() {
$("#addTag").val($("#tagName").val());
$(this).dialog("close");
$("#editFolioForm").attr("action", "/shared/addTag");
$("#editFolioForm").submit();
}
}
});
$("#createTag").click(function() {
$("#addTagDialog").dialog( "open" );
});
});
</script>
</head>
<body id="main">
<div th:include="/public/navbar :: navbar"></div>
<br></br>
<br></br>
<br></br>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11">
<h1 th:text="#{editFolio.title}">Updated</h1>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<span class="error-message" th:if="${feFeedback.error}" th:text="${feFeedback.error}">Error.</span>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<span class="info-message" th:if="${feFeedback.info}" th:text="${feFeedback.info}">Info.</span>
</div>
</div>
<form id="editFolioForm" th:object="${folioDto}" action="#" th:action="@{/shared/editFolio}" method="post">
<input type="hidden" id="campaignId" th:field="*{folio.campaignId}"></input>
<input type="hidden" id="unselectedTags" th:field="*{unselectedTags}"></input>
<input type="hidden" id="selectedTags" th:field="*{selectedTags}"></input>
<input type="hidden" id="addTag" th:field="*{addTag}"></input>
<input type="hidden" id="removeTag" th:field="*{removeTag}"></input>
<input type="hidden" id="folioId" th:field="*{folio.id}"></input>
<input type="hidden" id="operationType" th:field="*{operationType}"></input>
<input type="hidden" id="users" th:field="*{users}"></input>
<input type="hidden" id="isOwner" th:field="*{isOwner}"></input>
<input type="hidden" id="forwardingUrl" th:field="*{forwardingUrl}"></input>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-9">
<hr></hr>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-9">
<button id="folioStatus" type="button" class="input-margin btn btn-info dropdown-toggle" aria-expanded="false" th:text="${feFeedback.userStatus}"></button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2">
<label class="input-margin" th:text="#{editFolio.selectFolio}">Select</label>
</div>
<div class="col-md-8">
<div class="btn-group">
<button type="button" class="btn btn-default" th:utext="#{editFolio.selectFolio}" th:onclick="'selectFolio();'">Select Folio</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2">
<label class="input-margin" th:text="#{editFolio.pageTitle}">Name</label>
</div>
<div class="col-md-8">
<input id="pageTitle" class="input-margin fullWidth" th:field="*{folio.title}"></input>
</div>
</div>
<div id="addTagDialog" title="Add a tag">
<label for="tagName">New tag</label>
<input id="tagName"></input>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2">
<label class="input-margin" th:text="#{editFolio.createTag}">Create</label>
</div>
<div class="col-md-8">
<input type="button" id="createTag" class="input-margin" th:value="#{editFolio.createTagText}"></input>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
<label class="input-margin" th:text="#{selectFolio.unselectedTags}">Tags</label>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="row col-md-10">
<span id="unselectedTagSpan"></span>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
<label class="input-margin" th:text="#{selectFolio.selectedTags}">Tags</label>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div id="selectedTagSpan" class="row col-md-10">
</div>
</div>
<div id="editorContainer" class="folio-margin">
<div class="grid-container">
<div class="grid-width-100">
<textarea id="editor" th:field="*{folio.content}"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div id="viewContainer" class="hide folio-margin"></div>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-2">
<input type="button" id="changeView" class="basic-margin" value="View as HTML"></input>
</div>
</div>
<div id="permissionLabel" class="row">
<div class="col-md-1"></div>
<div class="col-md-2">
<label class="input-margin" th:text="#{editFolio.setPermissions}">Set</label>
</div>
</div>
<div id="permissionDiv" class="row">
<div class="col-md-1"></div>
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-body permissionListPanel">
<span id="permissionList"></span>
</div>
</div>
</div>
</div>
<br></br>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-7">
<input type="button" id="copyBtn" class="basic-margin" value="Copy"></input>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-7">
<input id="submitBtn" class="basic-margin" type="submit" value="Submit" />
</div>
</div>
</form>
<script>
<!-- ckeditor js code -->
initSample();
</script>
</body>
</html>
0 个答案:
没有答案
相关问题
- 模态中的充电信息（bootstrap 3.3.6）？
- 如何在boostrap 3.3.6中设计col？
- 从Bootstrap 3.1.0升级到3.3.7
- Bootstrap 3.3.6，为什么我的图像侧身？
- Bootstrap 3.3.7 glyphicons不适用于jQueryUi 1.12
- 为什么从Bootstrap 3.3.6切换到3.3.7会破坏用户界面？
- Bootstrap 3.3.7问题 - 为什么要实现！important属性？
- 将代码重写到Bootstrap 3.3.7
- 从bootsrap 3.3.7到bootsrap 4.1.3
- 使用ng-bootstrap将Bootstrap从4.3.1降级到3.3.7
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？