去除离子头中的边框底部

Posted 2023-03-16

【中文标题】去除离子头中的边框底部

【英文标题】：remove border bottom in ion header

【发布时间】：2015-01-23 06:47:30

【问题描述】：

我在尝试删除 ionic 应用程序中的 ion header 边框底部时遇到问题

这里是tab-home.html的代码：

                <ion-view hide-nav-bar="true">
            <ion-header-bar align-title="left" class="bar-transparent" >
            <button menu-toggle="left" class="button button-icon ion-ios7-settings">
            </button>
            <div class="title">&nbsp;</div>
            <h1 class="title">proximiti</h1>
            </ion-header-bar>
            <!--<ion-nav-bar class="bar-transparent">
            </ion-nav-bar>-->
            <ion-pane ng-controller="CardsCtrl">
            <!--<ion-nav-buttons side="left">
            <button menu-toggle="left" class="button button-icon ion-navicon"></button>
            </ion-nav-buttons>-->
            <td-cards>
            <td-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe-left="cardSwipedLeft($index)" on-swipe-right="cardSwipedRight($index)" on-partial-swipe="cardPartialSwipe(amt)" class="card-card.index" ng-controller="CardCtrl">
            <div class="image">
            <!--<div class="yes-text" ng-style="leftTextOpacity">LIKE</div>-->
            <img ng-src="card.image">
            <!--<div class="no-text" ng-style="rightTextOpacity">NOPE</div>-->
            </div>
            </td-card>
            </td-cards>
            </ion-pane>
            </ion-view>

您可以在这里看到我们感兴趣的部分：

                <ion-view hide-nav-bar="true">
            <ion-header-bar align-title="left" class="bar-transparent" >
            <button menu-toggle="left" class="button button-icon ion-ios7-settings">
            </button>
            <div class="title">&nbsp;</div>
            <h1 class="title">proximiti</h1>
            </ion-header-bar>

我尝试了所有方法（在浏览器中我看不到这个边框！），但没有任何改变！ 任何人都可以帮助我试图找到删除该边界的方法吗？ 注： : 还尝试编辑 ionic.css 并仅在浏览器中更改。

编辑：它应该只在这个视图中隐藏，所以类是条形透明的

【问题讨论】：

你找到解决办法了吗？有类似的问题。

您是否尝试添加样式：背景图像：无；边框底部：无？

我在我的应用程序中使用侧边菜单，并希望使标题透明！你能解释一下你是如何让你的标题透明的吗？我也有边境问题:(已经几周了..怜悯！

@MilanMaharjan 您可以在我接受的答案中看到我的表现。

【参考方案1】：

在 ionic 2/3 中，将使用 ionic-header no-border 移除边框。

<ion-header no-border> </ion-header>

在 ionic 5 中，将使用 class="ion-no-border" 移除边框。

<ion-header class="ion-no-border"></ion-header>

【参考方案2】：

没问题，

只需将其添加到您的自定义 CSS 中：

.bar-header 
    border: 0px !important;
    border-bottom-color: transparent !important;
    background-image: none !important;
    border-bottom: none !important;

【讨论】：

这成功了，但我不明白为什么..你能解释一下吗？

如果 sn-p 不起作用（就像它对我所做的那样）尝试添加 !important;到 background-image 和 border-bottom 属性。

对于 Ionic 2+，接受的答案应该是：***.com/a/44064058/3397345

【参考方案3】：

对于 ionic 5，应该是

<ion-header class="ion-no-border"></ion-header>

【参考方案4】：

@BenNov 的回答对我不起作用。

这就是我删除 ion-nav-bar 底部边框的方法

.bar 
    background-size: 100% 0px;

我正在使用 ionic-1.0.0-rc.4

【讨论】：

是的。这就是我为删除 ion-nav-bar 底部边框所做的操作

这不会移除边框，只是改变背景位置。可能边框和您的背景是相同的，但边框仍然存在，并且仍然考虑了它的高度。

【参考方案5】：

对于 Ionic 5，这对我有用：

<ion-header class="ion-no-border"></ion-header>

【参考方案6】：

选项 1：使用溢出 CSS 属性

ion-header 
    overflow: hidden;

选项 2：使用

的无边界特性

<ion-header no-border><ion-header>

【讨论】：

添加溢出：隐藏是唯一适用于 Ionic 4 的解决方案。

【参考方案7】：

这为我在 ionic 1.1.0 上删除了标题和选项卡之间的边框

.bar-header 
    box-shadow: none;
    height: 45px;

【参考方案8】：

我就是这样解决的……

给 ion-header 的 ion-toolbar 子级像“headerMain”这样的类，并在下面应用 css。

css:

.headerMain 
    border-bottom-width: 0;