跳跃的标题和演示说明了一切.Bootstrap 4的新旋转木马没有响应.图像超出了它们的宽高比.
有人知道如何在不对css和html进行重大调整的情况下解决这个问题吗？
.wrapper {
max-width:200px;
width:100%;
}<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://placehold.it/400x200" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://placehold.it/400x200" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://placehold.it/400x200" alt="Third slide">
</div>
</div>
</div>
</div>我正在使用 NgRx 并想测试我的效果。有些效果确实有去抖动时间。像这个例子：
@Effect() searchImage$ = this.actions$.pipe(
ofType(fromImageLibraryActions.SEARCH_IMAGES),
map((action: fromImageLibraryActions.SearchImages) => action.query),
debounceTime(300),
switchMap(query: string) => this.imageLibraryService.getImagesBySearching(query)),
map((images: LibraryImage[]) => new fromImageLibraryActions.LoadImages(images)));
我如何正确测试它们。我尝试了以下方法：
describe('SearchImages$', () => {
it('should return loadImages action', fakeAsync(() => {
const action = new fromImageLibraryActions.SearchImages('test');
const images = [
{ uploaderId: 1 } as LibraryImage,
{ uploaderId: 2 } as LibraryImage
];
const loadImagesAction = new fromImageLibraryActions.LoadImages(images);
actions$ = hot('--a-', { a: action });
tick(300);
getTestScheduler().flush();
const expected = cold('--b-', { b: loadImagesAction });
expect(effects.searchImage$).toBeObservable(expected);
})); …我面临以下挑战。当用户在输入字段中键入内容时，我想显示一个重置按钮，其位置在输入的右侧。
我无法更改标签，输入，按钮和错误消息的html结构。而且我不想使用浏览器支持。有人有创意怎么做吗？提前致谢。
label {
display: block;
}
.btn {
padding: 10px;
background-color: green;
color: #fff;
}
input {
padding: 10px;
}<div class="shopping-cart-coupon">
<div class="form-group">
<label for="coupon">Coupon</label>
<input name="coupon" type="text" id="coupon">
<a id="" style="" class="btn" href=''>Activate</a>
<span style="display:block;color:red;">Error message</span>
<a class="reset">x</a>
</div>
</div>