引导列的作用类似于行

时间：2018-07-11 06:54:25

标签： twitter-bootstrap model-view-controller twitter-bootstrap-3

我需要从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>

    &nbsp;&nbsp;
    &nbsp;&nbsp;
    <br />
    <br />
   
</body>
</html>

2 个答案:

答案 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> &nbsp;&nbsp; &nbsp;&nbsp; <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>

    &nbsp;&nbsp;
    &nbsp;&nbsp;
    <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>

    &nbsp;&nbsp;
    &nbsp;&nbsp;
    <br />
    <br />

</body>
</html>
相关问题
最新问题