如何用MVC中的数据整齐地设计标签？ [英] How to design label with data in MVC neatly?

问题描述

我使用mvc中的引导面板设计了一个网页，其中3列用PC屏幕固定。设计如下：

I had designed a web page using bootstrap panel in mvc with 3 column that fixed with the PC screen. Design as below:

Employee Name  :             Address  :                Email        : 

Employee Age   :             Country  :                Contact No   :

这个固定在电脑屏幕内。但问题是如果名称/地址/电子邮件时间更长，那么数据显示如下。

This one fixed inside the PC Screen. But the problem is if the name/address/email is longer , then the data displays like below.

Employee Name  :  Amar       Address  : XXXXXXXX       Email        : abcde@
Arvind Antony                XXXX                      gmail.com                
Employee Age   :  26         Country  : yyyyy          Contact No   :

但我想显示如下以便整齐地提供。

But I want to display as follows to provide neatly.

Employee Name  :Amar       Address  : XXXXXXXX       Email        :abcde@
                Arvind                XXXX                         gmail.com                
Employee Age   : 26        Country  : yyyyy          Contact No   :

如何使显示像这样？
我们在View中使用的代码是

How to make display like this ? The code we used in View is

<div class="clearfix"></div>
            <div class="col-sm-12 col-md-12">
                <div class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" @*data-parent="#accordion"*@ href="#collapse1"> <span class="glyphicon glyphicon-triangle-bottom"></span>Personal Particulars</a> </h4>
                        </div>
                        <div id="collapse1" class="panel-collapse collapse in">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-sm-6 col-md-3">
                                        <p class="mar_top_20"><img id="EmpImage" src="~/Content2/dist/img/dummy_image.jpg"  alt="" class="img-responsive"></p>
                                    </div>
                                    <div class="col-sm-6 col-md-3">
                                        <p class="form_text1">
                                            <span>Full Name</span> :
                                            <strong id="EmployeeName">-</strong> </p></div></div></div>

我只给了一个样本的标签集代码。
我们使用jquery使用id检索的输出。在jquery函数内部，我使用下面的代码从我的表中获取数据

I gave only one label set code for sample. The output we retrieve using id using jquery. Inside the jquery function I use the following line to get data from my table

 $('#EmployeeName').text(response.EmpName);

推荐答案

您需要试验6列布局。

<div class="container">
  <div class="row r1">
    <div class="col-sm-12">
      <div class="row">
        <div class="col-sm-2">Label1</div><div class="col-sm-2">Value1 Value1 Value1</div>
        <div class="col-sm-2">Label2</div><div class="col-sm-2">Value2 Value2 Value2</div>
        <div class="col-sm-2">Label3</div><div class="col-sm-2">Value3 Value3 Value3</div>
      </div>
    </div>
  </div>
</div>

您基本上共享一个标签及其值的列，这就是为什么您没有得到预期的布局。相反，你需要将它们分离到它们自己的列中。

You are basically sharing a column for both the label and its value which is why you don't get the expected layout. Instead, you need to separate these into their own columns.

所以你最终得到了成对的列：

So you end up with pairs of columns:

<div class="col-sm-2">Employee Name</div>
<div class="col-sm-2"><strong id="EmployeeName"></strong></div>

这篇关于如何用MVC中的数据整齐地设计标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！