Question

我希望我最外面的div容器只是＆＃34;容器＆＃34;对于md和lg，但是xs和sm的容器流体。我可以原生这样做吗？我需要一些额外的CSS吗？

感谢。

Answer 1

使用Bootstrap 4
普通css：

@media (max-width: 768px) {
  .container {
    width: 100%;
    max-width: none;
  }
}

如果您使用Sass：

@include media-breakpoint-down(md) {
  .container {
    width: 100%;
    max-width: none;
  }
}

演示：https://codepen.io/albertojacini/pen/KXgNqB

Answer 2

container和container-fluid在xs断点上相同，因为它们都是全宽。要覆盖sm断点的宽度，您可以执行此操作..

@media (max-width: 992px) {
   .container {
      width: 100%;
   }
}

演示：http://codeply.com/go/dHFw0LcVPl

container和container-fluid在Bootstrap 4中的工作方式相同。

Answer 3

如上所述，这是Bootstrap 4的解决方案

问题

目前，我们为xs视口提供了全宽边对边流体容器。然后我们为sm，md，lg等设置了固定大小的容器。

由于sm视口也被视为小型设备，我们有时也希望在那里使用全宽边对边流体容器，与xs相同。

解决方案

如果您自己从SCSS编译Bootstrap，则可以通过删除$container-max-widths max-width断点的sm来覆盖变量_variables.scss。 这是一个干净整洁的解决方案我建议。

在Bootstrap源代码（供应商）$container-max-widths: ( sm: 540px, // <-- we are going to remove this line md: 720px, lg: 960px, xl: 1140px ) !default;中查找：

sm

通过删除!default定义行并删除_my-variables.scss关键字，复制到您的自定义文件并覆盖，例如在$container-max-widths: ( md: 720px, lg: 960px, xl: 1140px );文件中：

$CurrentCell = $openedworksheet.Cells.Item($i, 1).text
$Array='1', '2', '3', '4'


foreach ($numbers in $Array) {
     if($CurrentCell.Contains($number)){
           write-host $currentCell
     }
}

详细了解Theming Bootstrap with your own SCSS variables。

如果您不自己编译Bootstrap，那么您最终可能会想要。这是你在那里找到的全新魔法水平。

Answer 4

如果使用Angular，则可以将ngClass与三元一起使用，并且如果window小于lg的像素断点，则函数返回true？

main.component.html：

Public Function Open_Share_Price_Excel()

' Change Cursor to Hourglass
DoCmd.Hourglass (True)




Dim Expath As String
Dim ModName As String
Dim XLApp As Object
Set XLApp = CreateObject("Excel.Application")

'
'Define where the Excel Spreadsheet is and the module to run
'

Expath = "C:\Users\peter\Documents\Financial Affairs\Shares\Share Price Bing.xlsm"
ModName = "Combined_Module"



With XLApp
    .Application.Visible = True
    .Application.DisplayAlerts = False
    .UserControl = True
    Dim OpenedWb As Object
    Set OpenedWb = .Workbooks.Open(Expath)
    .Run ModName
    OpenedWb.Close SaveChanges:=True

End With

XLApp.Quit
Set XLApp = Nothing

'Change Cursor back and display finished message

DoCmd.Hourglass (False)
DoCmd.SelectObject 2, "Portfolio Valuation", True

MsgBox ("Price Update Finished - OK to Continue")


End Function

main.component.ts：

<div [ngClass]="isFluid() ? 'container-fluid' : 'container'">
      --your content--
</div>

Answer 5

Bootstrap 4（.4）本身具有：

.container，它在每个响应断点处设置最大宽度

.container-fluid，即宽度：所有断点处为100％

.container-{breakpoint}，即宽度：100％，直到指定为止

因此，您可以设置：

<div class="container-md">

使容器的xs和sm（流体）的宽度达到100％，并在其上方获得部分宽度

参考：https://getbootstrap.com/docs/4.4/layout/overview/

用于xs，sm的Bootstrap容器流体

5 个答案:

问题

解决方案