Question

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

Employee Name  :             Address  :                Email        : 

Employee Age   :             Country  :                Contact No   :

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

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

但我希望显示如下以提供整洁。

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

如何制作这样的画面？我们在View中使用的代码是

<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函数内部，我使用以下行从我的表中获取数据

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

Answer 1

您需要尝试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>

您基本上是为标签及其值共享一列，这就是您没有获得预期布局的原因。相反，您需要将它们分成各自的列。

所以你最终得到了一对列：

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

如何在MVC中整齐地设计带有数据的标签？

1 个答案: