Html 如何调整烤面包机弹出窗口宽度_Html_Angularjs_Css_Toastr

Html 如何调整烤面包机弹出窗口宽度

html angularjs css

Html 如何调整烤面包机弹出窗口宽度,html,angularjs,css,toastr,Html,Angularjs,Css,Toastr,我正在使用AngularJS Toaster在我的应用程序中弹出通知。对于前端，我使用引导使用“container”类，我有一个1200px的网格。里面有一个带有弹出通知的div 我想将弹出通知的宽度调整为包含此烤面包机的容器的宽度。我看到toaster有一个参数'position class'来更改弹出窗口的位置甚至宽度，例如'toast top full width'，但是使用它我得到了一个全屏通知，它并没有调整到包含它的容器中。我想这是可以用Css实现的，但是如何实现呢？你能帮帮我吗下

我正在使用AngularJS Toaster在我的应用程序中弹出通知。对于前端，我使用引导

使用“container”类，我有一个1200px的网格。里面有一个带有弹出通知的div

我想将弹出通知的宽度调整为包含此烤面包机的容器的宽度。我看到toaster有一个参数'position class'来更改弹出窗口的位置甚至宽度，例如'toast top full width'，但是使用它我得到了一个全屏通知，它并没有调整到包含它的容器中。我想这是可以用Css实现的，但是如何实现呢？你能帮帮我吗

下面是我的html代码：

<body data-ng-controller="AppController">


    <div id="container" class="container">

   <toaster-container toaster-options="{'position-class': 'toast-container','time-out': 3000, 'close-button':true}"></toaster-container>

        <div id="header" data-ng-include="'partials/header/header.html'" ></div>



        <div data-ng-view></div>
        <div id="footer" data-ng-include="'partials/footer/footer.html'"></div>


        <div id="loader" class="loading overlay" data-ng-if="loader.loading">
            <p>We are loading the products. Please wait...</p>
            <img alt="" src="images/ajax-loader.gif">
         </div>   

    </div>

    <div id="loginPanel" data-ng-include="'partials/content/panels/login.html'"></div>


我们正在装货。请稍候

事先非常感谢

您可以将您的烤面包机的

等级更改为烤面包顶部全宽

 <toaster-container toaster-options="{'time-out': 3000, 'close-button':true, 'position-class':'toast-top-full-width'}"></toaster-container>

检查示例：-
我们可以在javascript文件中设置toastr选项，如下所示：-
toastr.options = {
   "positionClass": "toast-bottom-full-width",
   ...
};

您可以使用CSS将宽度设置为1200px或100%或任何其他长度
#toast-container > .toast {
  width: 1200px; /* width: 100% */
}

已为左边距和右边距属性定义了值“自动”。因此，如果想要在侧面留出一点间距，我会使用：
#toast-container > .toast {
    max-width: 1200px;
    width: 90%;
}

#toast-container > .toast {
    max-width: 1200px;
    width: 90%;
}