CSS3を使用した列と行のレイアウト

Question

私はブートストラップで列スタイルを実現しようとしています。私はラベルに値を付け、列に値を設定したい。理想的には5列を探し、各列にはラベルとフィールド値が含まれます。私はかなり近いですが、まだそれを持っていないとして、いくつかのラベルとフィールドをコメントアウトしています。私は自分のコードの出力を添付しました。誰かが私が間違っているところを私に見せてもらえますか？

ブートストラップを使用しているので、あなたはあなたの両方COL-MD-2の5倍、またはCOL-MD-1 10回とスタイルを使用することができます

<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

CSSください。 。

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>