Angular 角度栅格id中的Boostrap 4显示卡的外部

我在我的带有boostrap 4的angular项目中使用核心ui模板

** 它是这样显示的

---

问题在于行中的内容量超过了包含父元素的宽度。您看到它是因为溢出是可见的。 所有输入元素都有一个设置的宽度，并溢出容器

代码没有问题。你只是没有你想要的空间

您可以将id的minwidth和maxwidth减少到5或10左右

所有显示数字的字段都可以更小。也许你可以在那里节省一些空间。电话号码可能不需要30个字符长的字段

您还可以使用较小的大小使内容变小

将css类添加到css文件：

.make-smaller input{
font-size:10px;    // make the font small
width:fit-content; // will make is as big as the content
}

如果这仍然不够，您可以使您的内容可滚动：

.make-scrollable{
overflow-x: scroll;    // make the container scrollable

}

然后，您可以在html中使用这些css类将其应用于元素：

<div class="card-body make-scrolable">  <--- content scrolable 

    <div class="form-group row make-smaller" id="grid-container"> <-- make things smaller

      <angular-slickgrid gridId="branchGrid" 
        [columnDefinitions]="columnDefinitions"
        [gridOptions]="gridOptions" [dataset]="dataset"                                
        (onAngularGridCreated)="angularGridReady($event)">
      </angular-slickgrid>
     </div>

---

我认为你的问题来自于
尝试改变到较低的宽度
，或者如果不是很好，那么尝试使用
flex
@B.S.有些效果..我已经更新了这个问题..你是否可以建议你似乎依赖于角度平滑网格来始终完美地调整大小，但由于多种原因它并不完美，其中一个原因是，大小调整器尝试计算可用大小，但DOM元素并不总是在信息上提供该类型（div可能显示为0px高度，这可能会使大小调整器失效），在您的情况下，您可能希望读取此网格[问题[（）你应该认真阅读所有的维基，阅读，我帮不了你更多。很抱歉…事实上我对agular是新来的。从。2天开始我在阅读。但是我不能做到。是的。我已经知道设置maxwidth很好。但是没有设置maxwidth有其他解决方案吗？我已经编辑了qestion。如果你愿意的话有更多的内容，然后你可以包含你可能想考虑启用滚动？你想把右边的空格包含更多的空间？@ GLNEWO如何启用滚动？Actuuli我在CSS/JavaScPT中有有限的知识。我的问题I。如果我不设置最大宽度，当我点击TopGLER在顶部（右侧）网格重叠时。（qtn中的第一个屏幕截图）我用CSS示例更新了。@Glen
.make-smaller input{
font-size:10px;    // make the font small
width:fit-content; // will make is as big as the content
}

.make-scrollable{
overflow-x: scroll;    // make the container scrollable

}

<div class="card-body make-scrolable">  <--- content scrolable 

    <div class="form-group row make-smaller" id="grid-container"> <-- make things smaller

      <angular-slickgrid gridId="branchGrid" 
        [columnDefinitions]="columnDefinitions"
        [gridOptions]="gridOptions" [dataset]="dataset"                                
        (onAngularGridCreated)="angularGridReady($event)">
      </angular-slickgrid>
     </div>