如何在中心对齐这些项目？

时间：2018-01-31 12:02:05

标签： css twitter-bootstrap bootstrap-4

您知道如何将文字"value1", "value2", "value3"相对于"Item 2", "Item 3", "Item 4"上方的文字对齐。 "value1", "value2" and "value3"相对于"Item 2", "Item 3", "Item 4"显示在右侧。它就像一个表格布局但没有使用表格。

工作示例：https://jsfiddle.net/teydLt4t/4/

HTML： 

<div class="card">
  <div class="card-header d-flex justify-content-between">
    <span class="font-weight-bold">Title</span>
  </div>
  <div class="card_body">
    <ul class="list-group list-group-flush">
      <li class="list-group-item d-flex align-items-center justify-content-between">
        <span class="text-heading-blue font-size-sm font-weight-semi-bold">Item 1</span>
        <span class="text-heading-blue font-size-sm font-weight-semi-bold">Item 2</span>
        <span class="text-heading-blue font-size-sm font-weight-semi-bold">Item 3</span>
        <span class="text-heading-blue font-size-sm font-weight-semi-bold">Item 4</span>
      </li>
      <li class="list-group-item d-flex align-items-center justify-content-between">
        <span class="font-size-sm">Description type</span>
        <span class="font-size-sm">value</span>
        <span class="font-size-sm">value</span>
        <span class="font-size-sm">value</span>
      </li>
      <li class="list-group-item d-flex align-items-center justify-content-between">
        <div>
          <span class="font-weight-semi-bold text-heading-blue">Description</span>
        </div>
        <span class="font-weight-bold font-size-lg text-heading-blue">value</span>
      </li>
    </ul>

  </div>
</div>

4 个答案:

答案 0 :(得分：0)

尝试在标题中添加一个类，在css中添加一个宽度。

.title {
  width: 100px;
}

jsfiddle

答案 1 :(得分：0)

由于文本的长度不同，因此会出现对齐问题。因此，请修复span元素宽度，以便正确对齐所有内容。

  li.list-group-item span {width:25%;}

DEMO

答案 2 :(得分：0)

如果您希望多行以列协调方式显示项目，则有两个选项：

  • 使用<table>元素
  • 控制细胞的宽度

我将flex-grow:1与flex-basis:0%结合使用：

.list-group-item > span {
  flex: 1;
}


.list-group-item > span {
  flex: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
  <div class="card-header d-flex justify-content-between">
    <span class="font-weight-bold">Title</span>
  </div>
  <div class="card_body">
    <ul class="list-group list-group-flush">
      <li class="list-group-item d-flex align-items-center justify-content-between">
        <span class="text-heading-blue font-size-sm font-weight-semi-bold">Title</span>
        <span class="text-heading-blue font-size-sm font-weight-semi-bold">Item 2 - this is a longer text let's see if it wraps</span>
        <span class="text-heading-blue font-size-sm font-weight-semi-bold">Item 3</span>
        <span class="text-heading-blue font-size-sm font-weight-semi-bold">Item 4</span>
      </li>
      <li class="list-group-item d-flex align-items-center justify-content-between">
        <span class="font-size-sm">Description</span>
        <span class="font-size-sm">valu2</span>
        <span class="font-size-sm">value3</span>
        <span class="font-size-sm">value4</span>
      </li>
      <li class="list-group-item d-flex align-items-center justify-content-between">
        
        <span class="font-weight-semi-bold text-heading-blue">Description</span>
        
        <span class="font-weight-bold font-size-lg text-heading-blue">value</span>
      </li>
    </ul>

  </div>
</div>

更新的示例（根据评论）：

.list-group-item > span {
  flex: 1;
  max-width: 25%;
}
.list-group-item > span:not(:first-child) {
  text-align: center;
}

.list-group-item {
  justify-content: space-betwen;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
  <div class="card-header d-flex justify-content-between">
    <span class="font-weight-bold">Title</span>
  </div>
  <div class="card_body">
    <ul class="list-group list-group-flush">
      <li class="list-group-item d-flex align-items-center justify-content-between">
        <span class="text-heading-blue font-size-sm font-weight-semi-bold">Title</span>
        <span class="text-heading-blue font-size-sm font-weight-semi-bold">Item 2 - this is a longer text let's see if it wraps</span>
        <span class="text-heading-blue font-size-sm font-weight-semi-bold">Item 3</span>
        <span class="text-heading-blue font-size-sm font-weight-semi-bold">Item 4</span>
      </li>
      <li class="list-group-item d-flex align-items-center justify-content-between">
        <span class="font-size-sm">Description</span>
        <span class="font-size-sm">valu2</span>
        <span class="font-size-sm">value3</span>
        <span class="font-size-sm">value4</span>
      </li>
      <li class="list-group-item d-flex align-items-center justify-content-between">
        
        <span class="font-weight-semi-bold text-heading-blue">Description</span>
        
        <span class="font-weight-bold font-size-lg text-heading-blue">value</span>
      </li>
    </ul>

  </div>
</div>

答案 3 :(得分：0)

您可以使用Table代替此布局。

＆＃13;
＆＃13; 
table.table {
  margin-bottom: 0;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">

  <div class="card_body">
    <table class=" table">
      <thead>
        <tr>
          <th><span class="font-weight-bold">Title</span></th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td class="text-heading-blue font-size-sm font-weight-semi-bold">Title</td>
          <td class="text-heading-blue font-size-sm font-weight-semi-bold">Item 2</td>
          <td class="text-heading-blue font-size-sm font-weight-semi-bold">Item 3</td>
          <td class="text-heading-blue font-size-sm font-weight-semi-bold">Item 4</td>
        </tr>
        <tr class="">
          <td class="font-size-sm">Description</td>
          <td class="font-size-sm">valu2</td>
          <td class="font-size-sm">value3</td>
          <td class="font-size-sm">value4</td>
        </tr>
        <tr class="">
          <td colspan="3">
            <span class="font-weight-semi-bold text-heading-blue">Description</span>
          </td>
          <td class="font-weight-bold font-size-lg text-heading-blue">value</td>
        </tr>
      </tbody>
    </table>

  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题