删除边框底部离子头

我试图消除离子标题边框底部在我的离子应用删除边框底部离子头

you could see my ionic header with border here

这里的一个问题是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>

我试过ev （在浏览器中我看不到这个边框！），但没有什么可以改变的！任何人都可以帮助我找到方法来删除该边界？ N.B. ：也试图编辑ionic.css并只在浏览器中更改。

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

来源

2014-11-25 Ludovico Loreti

你曾经找到过这样的解决办法吗？有类似的问题。 – 2014-12-03 18:20:08

您是否尝试添加样式：background-image：none; border-bottom：无？ – Christopher 2014-12-24 00:40:04

我在我的应用程序中使用sidemenu，并希望使标题透明！你能解释一下你是如何使标题透明的？我也有边界问题:(它已经过了星期..有怜悯！ – 2015-05-18 05:55:17

没问题，

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

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

来源

2014-12-24 02:30:50 BenNov

这样做的伎俩，但我不明白为什么......扫描你给一些解释？ – 2015-07-23 16:22:23

如果代码片段不起作用（就像它对我来说）尝试添加！important;到background-image和border-bottom属性 – 0x1ad2 2015-12-16 10:24:39

使用Ionic 2+接受的答案应该是：https： //stackoverflow.com/a/44064058/3397345 – Davidea 2017-08-11 11:51:19

@BenNov答案不适用于我。

这是我做的，除去离子导航栏底部边框

.bar { 
    background-size: 100% 0px; 
}

我与离子-1.0.0-rc.4工作

来源

2015-04-28 11:05:15

是的，这是我所做的，以删除ion-nav-bar底部边框 – 2015-04-28 11:11:21

好的谢谢。编辑;） – 2015-04-28 11:14:17

它为我工作。谢谢。 – user1519240 2016-01-15 17:05:31

这去除之间的边界我的离子标题和标签1.1.0

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

来源

2017-04-27 14:50:21

通过使用离子头无边界，所有边界将被删除。

<ion-header no-border>

来源

2017-09-11 07:07:10

谢谢，这是简单和工作的解决方案 – 2017-11-21 03:50:56

删除边框底部离子头

回答

相关问题