html - 使用 CSS3 的列和行布局

Question

我正在尝试使用 bootstrap 实现列样式。我想在一列中标记和字段值。理想情况下寻找 5 列，每列将包含标签和字段值。我已经注释掉了一些标签和字段，因为我非常接近但仍然没有得到它。我还附上了我的代码的输出。有人可以告诉我哪里出错了。

CSS

<style>
.requestDetail {
    font-size: 9px;
    font-family: Helvetica, sans-serif, sans-serif;
  }


</style>


<div class="requestDetail">
    <div class="row">
        <div>@Html.Label("Country Number", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">GB</div>
        <div>@Html.Label("Company Code", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1">8100</div>
        <div>@Html.Label("Project Name", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">Nishan ProjectName</div>
        <div>@Html.Label("Name Of Responsible Person", htmlAttributes: new { @class = "editor-label col-sm-2" })</div><div class="col-sm-1 editor-field">Desmond Beckford</div>
        @*<div>@Html.Label("Modified By", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">Nishan Murugdfdd</div>*@
    </div>
    <div class="row">
        <div>@Html.Label("Customer Number", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">0081000653</div>
        <div>@Html.Label("Customer Shortname", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">AMEY</div>
        <div>@Html.Label("Project Content", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">ProjectContent</div>
        @*<div>@Html.Label("Applicant Number", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">00000372</div>*@
    </div>
    <div class="row">
        <div>@Html.Label("Sales Office Code", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">8101</div>
        <div>@Html.Label("Sales Office", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">Hatfield PS</div>
        <div>@Html.Label("Contract Start Date", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">20/03/2017 17:04:36 +00:00</div>
        @*<div>@Html.Label("Applicant Name", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">fgfgfgfgfgf</div>*@
    </div>
    <div class="row">
        <div>@Html.Label("Name", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">DNU - Amey Group Information Servic</div>
        <div>@Html.Label("Status", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">New Request</div>
        <div>@Html.Label("Contract Duration In Months", htmlAttributes: new { @class = "editor-label col-sm-2" })</div><div class="col-sm-2 editor-field">5</div>
        @*<div>@Html.Label("Is Required To Send To Cost Desk", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">@(Model.IsRequiredToSendToCostDesk)</div>*@
    </div>
    <div class="row">
        <div>@Html.Label("City", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">BELFAST</div>
        <div>@Html.Label("Postal Code", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">BT1 1EA</div>
        <div>@Html.Label("Priority", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">20/03/2017 17:04:36 +00:00</div>
        @*<div>@Html.Label("Calculation Specials", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">dfdfdfdfdfdfdfd</div>*@
    </div>
    <div class="row">
        <div>@Html.Label("Street", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">1A Royal Avenue</div>
        <div>@Html.Label("Phone", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">028 8044 6464</div>
        <div>@Html.Label("SAP Office Username", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">DBECKFOR</div>
        @*<div>@Html.Label("Created By", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">cvcvcvcvcv</div>*@
    </div>
    <div class="row">
        <div>@Html.Label("General Agreement Name", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">GeneralAgreementName</div>
        <div>@Html.Label("Is Day Business", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">True</div>
        <div>@Html.Label("Number Of Responsible Person", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">00001724</div>
        @*<div>@Html.Label("Created Date", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">20/03/2017 17:04:36 +00:00</div>*@
        @*<div>@Html.Label("Modified Date", htmlAttributes: new { @class = "editor-label col-sm-1" })</div><div class="col-sm-1 editor-field">20/03/2017 17:04:36 +00:00</div>*@
    </div>



</div>

Answer 1

由于您使用的是 Bootstrap ，因此您可以同时使用 col-md-2 五次或 col-md-1 十次，并根据需要设置样式。

记住，如果你想使用 col-md-2，你应该使用 offset。

.col-md-1{
border-style: solid;
border-width: 1px !important;
border-color: black;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>

<div class="row">
    <div class="col-xs-1 col-md-1">1</div>
    <div class="col-xs-1 col-md-1">2</div>
    <div class="col-xs-1 col-md-1">3</div>
    <div class="col-xs-1 col-md-1">4</div>
    <div class="col-xs-1 col-md-1">5</div>
    <div class="col-xs-1 col-md-1">6</div>
    <div class="col-xs-1 col-md-1">7</div>
    <div class="col-xs-1 col-md-1">8</div>
    <div class="col-xs-1 col-md-1">9</div>
    <div class="col-xs-1 col-md-1">10</div>             
</div>