如何在CSS中设置字体 - 真棒图标的样式?

时间:2018-04-20 20:06:39

标签: html css bootstrap-4 font-awesome fiddle

下面有我在HTML / CSS中复制过的截图。 移动和桌面视图的设计完全相同。在设计中,角度下拉字体 - 真棒图标(在屏幕截图中标有箭头)与标题正确对齐,而在移动视图中我的设计并非如此。

第一张图片:

enter image description here

我为上面的屏幕截图创建了fiddle。由于某些原因,我没有看到小提琴中的移动视图(我们是否有办法在小提琴中启用移动视图?)。我在小提琴中使用的HTML代码片段是:

<tr>
    <th scope="col">Name <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
    <th scope="col" class="number">Number <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
    <th scope="col" class="table2">Table <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
    <th scope="col" class="status">Status <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
</tr>





在我的电脑上的移动视图(如屏幕截图中所示),我看到角度下拉图标上的数字标题。

第二张图片

enter image description here

问题陈述:

我想知道我需要在fiddle中做出哪些更改,以便数字表格标题与角落下拉字体对齐 - 移动视图中的精彩图标在第一张图片中标记为箭头)。

由于某些原因,我无法在小提琴中看到移动视图。

5 个答案:

答案 0 :(得分:3)

只需使用 Bootstrap 4 text-nowrap课程即可...

https://jsfiddle.net/9shn3qxz/

<div class="table-responsive body-manage-attendees">
        <table class="table table-hover">
            <thead>
                <tr>
  <th scope="col">Name <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                    <th scope="col" class="number text-nowrap">Number <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                    <th scope="col" class="table2 text-nowrap">Table <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                    <th scope="col" class="status text-nowrap">Status <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="left">Amanda Doe</td>
                    <td class="number1">250</td>
                    <td class="table1">2</td>
                    <td class="right-bill">Bill</td>
                </tr>
                <tr>
                    <td class="left">Andy Doe</td>
                    <td class="number1">14</td>
                    <td class="table1">1</td>
                    <td class="right-bill">Bill</td>
                </tr>

            </tbody>
        </table>
    </div>

答案 1 :(得分:2)

似乎有两种选择可以立即浮现在脑海中。

  1. 在移动设备上使用responsive table,以免表格宽度受损。
  2. 使用媒体查询调整列的大小,使名称和图标不会干扰彼此的间距,并且表格仍然清晰可辨。
    1. 或者,在移动设备上调整标题字体的大小。
  3. 使用表格响应

    使用<div class="table-responsive">围绕您的桌子以确保响应。

    使用CSS媒体查询

    由于您使用的是Bootstrap 4,我会将其保留为“移动优先”。

    th {
        font-size: 14px; // Smallest font size you want them to render
    }
    @media (min-width: 768px) {
        // After the screen is at least 768px wide, use larger font size
        // alter the min-width as many times as needed or appropriate
        th{
          font-size: 16px;
        }
    }
    

    这基本上就是你在CSS里面做的事情。首先保持移动视图,并构建更大的显示尺寸。

    编辑2

    使用样式,删除.table td, .table th上的左/右填充似乎可以解决图标问题。您可能只想调整移动视图的列填充。

答案 2 :(得分:2)

最简单的方法是将white-space:nowrap添加到th,这样这些字词就不会被分割出来。但是,您应该对表格添加一些响应。

.table td,
.table th {
  border-top: none! important;
  padding-left: 3%;
}

.table thead th {
  border-bottom: none! important;
  white-space: nowrap;
}

.table td.left {
  padding-right: 32%;
}

.dropdown a {
  color: #676767;
  font-weight: bold;
  font-size: 14px;
}

.dropdown li {
  padding-left: 20px;
}

.dropdown li:hover {
  background-color: #EDEDED;
}

.body-manage-attendees {
  width: 100% !important;
}

.body-manage-attendees tbody tr:hover {
  background-color: #EDEDED;
}

.body-manage-attendees .number {
  padding-left: 2%;
  padding-right: 6%;
}

.body-manage-attendees .table1 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .table2 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .status {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right-bill {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-nobill {
  padding-left: 1%;
  text-align: center;
  border: 1px solid white;
  color: black;
}

.body-manage-attendees .right-unapid {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-itemsreceived {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #10314C;
}

.square {
  display: inline-block;
  border-radius: 5px;
  border: 1px solid white;
  margin-right: 5%;
  height: 15px;
  width: 15px;
  vertical-align: middle;
}

.square.white {
  display: inline-block;
  border-radius: 5px;
  border: 1px solid white;
  background-color: white;
  height: 15px;
  margin-right: 10%;
  width: 15px;
  vertical-align: middle;
}

.right-itemswaiting span {
  vertical-align: middle;
  padding-left: 1%;
}

.table td,
.table th {
  border-top: none! important;
  padding-left: 3%;
}

.table thead th {
  border-bottom: none! important;
}

.table td.left {
  padding-right: 32%;
}

.right-itemswaiting {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.right-itemsreceived {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.body-manage-attendees tbody tr:hover {
  background-color: #EDEDED;
}

.body-manage-attendees .number {
  padding-left: 2%;
  padding-right: 6%;
}

.body-manage-attendees .table1 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .table2 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .status {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right-bill {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-nobill {
  padding-left: 1%;
  text-align: center;
  border: 1px solid white;
  color: black;
}

.body-manage-attendees .right-unpaid {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-itemsreceived {
  padding-left: 1%;
  color: white;
  text-align: center;
  background-color: #10314C;
}

.body-manage-attendees .right-itemswaiting {
  padding-left: 1%;
  text-align: center;
  color: white;
  border: 1px solid white;
  background-color: #10314C;
}

.body-manage-attendees .right-unpaid {
  padding-left: 1%;
  color: white;
  background-color: #1173B7;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="table-responsive body-manage-attendees">
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">Name <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
        <th scope="col" class="number">Number <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
        <th scope="col" class="table2">Table <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
        <th scope="col" class="status">Status <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="left">Amanda Doe</td>
        <td class="number1">250</td>
        <td class="table1">2</td>
        <td class="right-bill">Bill</td>
      </tr>
      <tr>
        <td class="left">Andy Doe</td>
        <td class="number1">14</td>
        <td class="table1">1</td>
        <td class="right-bill">Bill</td>
      </tr>

    </tbody>
  </table>
</div>

答案 3 :(得分:1)

您可以设置表格td和th的最小宽度。

.table td,
.table th {
    border-top: none! important;
    padding-left: 3%;
    min-width:140px;
}

您可能需要调整应用于最小宽度的实际值。这将防止列占用小于设置的宽度,但不会限制列仅占用该空间量。

我还会考虑为每列应用不同的最小宽度,因为Number列需要大约140px,但Table列只需要大约80px。这将为名称留出更多可用空间。

答案 4 :(得分:0)

要解决此问题,您可以尝试将Bootstrap 4 text-nowrap类添加到表中。

您可以编辑表格的css属性以使white-space:nowrap