我需要从HTML生成发票。问题是我需要在标题上以相同的宽度设置三个相等的列，但是由于某种原因，标题中的项会以行的形式出现。我正在使用引导程序。
即使我将这些代码行添加到代码段中，它也看起来像行。你能告诉我我在做什么错吗？
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
@model GGISServices.Models.TimberMonitor.GenerateDamageInvoiceViewModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
@*<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/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>*@
<title>Damage</title>
@Styles.Render("~/Content/bootstrapstyle")
<style type="text/css">
body {
background-color: #fff;
color: #000000;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
h1 {
font-size: 28px;
margin-bottom: 5px;
margin-top: 10px;
}
.font-bold {
font-weight: bold;
}
.background-grey {
background-color: #eaeaea;
}
.full-border-row td {
border: 1px solid #dddddd;
}
.column h1, h2 {
font-weight: bold;
}
.logo {
height: 40px;
width: 250px;
margin-left: 15px;
}
.headerData {
font-family: "Times New Roman", Helvetica, Arial, sans-serif;
font-size: 10.75pt;
margin-top: 30px;
}
.ownerText {
font-family: "Times New Roman", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: normal;
}
.companyHeaderData, .partnerHeaderData {
line-height: 8px;
}
.invoiceData {
line-height: 12px;
}
.invoicePNP {
font-size: 16px;
}
.invoiceData p {
margin-left: 20px;
}
.signs {
text-align: right;
font-weight: bold;
}
.descriptionText {
margin-left: 5px !important;
vertical-align: top;
font-size: 12px;
text-align: left !important;
}
.column {
border: 1px solid grey;
margin-top: 100px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 50px;
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="container headerData">
<div class="row" style="height:15px;"></div>
<div class="row">
<div class="column companyHeaderData col-sm-3">
<p style="font-weight:bold;">Furnizor:</p>
<p style="font-weight:bold;">@Model.Company.CompanyName</p>
<p>Reg.Com: @Model.Company.CompanyRegistryNumber</p>
<p>C.I.F.: @Model.Company.CompanyCIF</p>
</div>
<div class="column invoiceData col-sm-3" style="background-color:#f2f2f2;">
<div class="row"></div>
<div class="row">
<h2 style="text-align: center;"> INVOICE </h2>
<br />
<p class="invoicePNP" style="text-align: center;"> @Model.CompanyPNPPrefix @Model.CompanyPNCurrentNumber </p>
</div>
<div class="row"></div>
</div>
<div class="column partnerHeaderData col-sm-3">
<p style="font-weight:bold;">@Model.Partner.PartnerName</p>
<p>Reg.Com: @Model.Partner.PartnerNrReg</p>
<p>C.I.F.: @Model.Partner.PartnerCIF</p>
</div>
</div>
</div>
<br />
<br />
</body>
</html>
答案 0 :(得分：1)
它们出现在行中，因为它们不适合父行，并且当屏幕宽度小于768px时它们会更改。删除margin-left和margin-right以适合父级。
如果希望在每个屏幕宽度上都将-sm-更改为-xs-，可以将它们更改为@model GGISServices.Models.TimberMonitor.GenerateDamageInvoiceViewModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
@*<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/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>*@
<title>Damage</title>
@Styles.Render("~/Content/bootstrapstyle")
<style type="text/css">
body {
background-color: #fff;
color: #000000;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
h1 {
font-size: 28px;
margin-bottom: 5px;
margin-top: 10px;
}
.font-bold {
font-weight: bold;
}
.background-grey {
background-color: #eaeaea;
}
.full-border-row td {
border: 1px solid #dddddd;
}
.column h1, h2 {
font-weight: bold;
}
.logo {
height: 40px;
width: 250px;
margin-left: 15px;
}
.headerData {
font-family: "Times New Roman", Helvetica, Arial, sans-serif;
font-size: 10.75pt;
margin-top: 30px;
}
.ownerText {
font-family: "Times New Roman", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: normal;
}
.companyHeaderData, .partnerHeaderData {
line-height: 8px;
}
.invoiceData {
line-height: 12px;
}
.invoicePNP {
font-size: 16px;
}
.invoiceData p {
margin-left: 20px;
}
.signs {
text-align: right;
font-weight: bold;
}
.descriptionText {
margin-left: 5px !important;
vertical-align: top;
font-size: 12px;
text-align: left !important;
}
.column {
border: 1px solid grey;
margin-top: 100px;
margin-bottom: 50px;
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="container headerData">
<div class="row" style="height:15px;"></div>
<div class="row">
<div class="column companyHeaderData col-xs-4">
<p style="font-weight:bold;">Furnizor:</p>
<p style="font-weight:bold;">@Model.Company.CompanyName</p>
<p>Reg.Com: @Model.Company.CompanyRegistryNumber</p>
<p>C.I.F.: @Model.Company.CompanyCIF</p>
</div>
<div class="column invoiceData col-xs-4" style="background-color:#f2f2f2;">
<div class="row"></div>
<div class="row">
<h2 style="text-align: center;"> INVOICE </h2>
<br />
<p class="invoicePNP" style="text-align: center;"> @Model.CompanyPNPPrefix @Model.CompanyPNCurrentNumber </p>
</div>
<div class="row"></div>
</div>
<div class="column partnerHeaderData col-xs-4">
<p style="font-weight:bold;">@Model.Partner.PartnerName</p>
<p>Reg.Com: @Model.Partner.PartnerNrReg</p>
<p>C.I.F.: @Model.Partner.PartnerCIF</p>
</div>
</div>
</div>
<br />
<br />
</body>
</html>。
<html>
<head>
<script>
function f1(el) {
alert(getCaretPosition(el));
}
function getCaretPosition(editableDiv) {
var caretPos = 0,
sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0);
if (range.commonAncestorContainer.parentNode == editableDiv) {
caretPos = range.endOffset;
}
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
if (range.parentElement() == editableDiv) {
var tempEl = document.createElement("span");
editableDiv.insertBefore(tempEl, editableDiv.firstChild);
var tempRange = range.duplicate();
tempRange.moveToElementText(tempEl);
tempRange.setEndPoint("EndToEnd", range);
caretPos = tempRange.text.length;
}
}
return caretPos;
}
</script>
</head>
<body>
<span id="test" contenteditable="true">abcd</span>
<button onclick="f1(document.getElementById('test'))">check position</button>
</body>
</html>
答案 1 :(得分：0)
@model GGISServices.Models.TimberMonitor.GenerateDamageInvoiceViewModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
@*<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/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>*@
<title>Damage</title>
@Styles.Render("~/Content/bootstrapstyle")
<style type="text/css">
body {
background-color: #fff;
color: #000000;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
h1 {
font-size: 28px;
margin-bottom: 5px;
margin-top: 10px;
}
.font-bold {
font-weight: bold;
}
.background-grey {
background-color: #eaeaea;
}
.full-border-row td {
border: 1px solid #dddddd;
}
.column h1, h2 {
font-weight: bold;
}
.logo {
height: 40px;
width: 250px;
margin-left: 15px;
}
.headerData {
font-family: "Times New Roman", Helvetica, Arial, sans-serif;
font-size: 10.75pt;
margin-top: 30px;
}
.ownerText {
font-family: "Times New Roman", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: normal;
}
.companyHeaderData, .partnerHeaderData {
line-height: 8px;
}
.invoiceData {
line-height: 12px;
}
.invoicePNP {
font-size: 16px;
}
.invoiceData p {
margin-left: 20px;
}
.signs {
text-align: right;
font-weight: bold;
}
.descriptionText {
margin-left: 5px !important;
vertical-align: top;
font-size: 12px;
text-align: left !important;
}
.column {
border: 1px solid grey;
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="container headerData">
<div class="row" style="height:15px;"></div>
<div class="row">
<div class="column companyHeaderData col-sm-3">
<p style="font-weight:bold;">Furnizor:</p>
<p style="font-weight:bold;">@Model.Company.CompanyName</p>
<p>Reg.Com: @Model.Company.CompanyRegistryNumber</p>
<p>C.I.F.: @Model.Company.CompanyCIF</p>
</div>
<div class="column invoiceData col-sm-3" style="background-color:#f2f2f2;">
<h2 style="text-align: center;"> INVOICE </h2>
<br />
<p class="invoicePNP" style="text-align: center;"> @Model.CompanyPNPPrefix @Model.CompanyPNCurrentNumber </p>
</div>
<div class="column partnerHeaderData col-sm-3">
<p style="font-weight:bold;">@Model.Partner.PartnerName</p>
<p>Reg.Com: @Model.Partner.PartnerNrReg</p>
<p>C.I.F.: @Model.Partner.PartnerCIF</p>
</div>
</div>
</div>
<br />
<br />
</body>
</html>
@model GGISServices.Models.TimberMonitor.GenerateDamageInvoiceViewModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
@*<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/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>*@
<title>Damage</title>
@Styles.Render("~/Content/bootstrapstyle")
<style type="text/css">
body {
background-color: #fff;
color: #000000;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
h1 {
font-size: 28px;
margin-bottom: 5px;
margin-top: 10px;
}
.font-bold {
font-weight: bold;
}
.background-grey {
background-color: #eaeaea;
}
.full-border-row td {
border: 1px solid #dddddd;
}
.column h1, h2 {
font-weight: bold;
}
.logo {
height: 40px;
width: 250px;
margin-left: 15px;
}
.headerData {
font-family: "Times New Roman", Helvetica, Arial, sans-serif;
font-size: 10.75pt;
margin-top: 30px;
}
.ownerText {
font-family: "Times New Roman", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: normal;
}
.companyHeaderData, .partnerHeaderData {
line-height: 8px;
}
.invoiceData {
line-height: 12px;
}
.invoicePNP {
font-size: 16px;
}
.invoiceData p {
margin-left: 20px;
}
.signs {
text-align: right;
font-weight: bold;
}
.descriptionText {
margin-left: 5px !important;
vertical-align: top;
font-size: 12px;
text-align: left !important;
}
.column {
border: 1px solid grey;
margin-top: 100px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 50px;
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="container headerData">
<div class="row" style="height:15px;"></div>
<div class="row">
<div class="column companyHeaderData col-sm-3">
<p style="font-weight:bold;">Furnizor:</p>
<p style="font-weight:bold;">@Model.Company.CompanyName</p>
<p>Reg.Com: @Model.Company.CompanyRegistryNumber</p>
<p>C.I.F.: @Model.Company.CompanyCIF</p>
</div>
<div class="column invoiceData col-sm-3" style="background-color:#f2f2f2;">
<div class="row"></div>
<div class="row">
<h2 style="text-align: center;"> INVOICE </h2>
<br />
<p class="invoicePNP" style="text-align: center;"> @Model.CompanyPNPPrefix @Model.CompanyPNCurrentNumber </p>
</div>
<div class="row"></div>
</div>
<div class="column partnerHeaderData col-sm-3">
<p style="font-weight:bold;">@Model.Partner.PartnerName</p>
<p>Reg.Com: @Model.Partner.PartnerNrReg</p>
<p>C.I.F.: @Model.Partner.PartnerCIF</p>
</div>
</div>
</div>
<br />
<br />
</body>
</html>