向左移动侧边栏

Question

我可能提出了一个愚蠢的问题，但我不太擅长前端，而我无法将侧边栏移到左侧。我试图做类似 .sidebar expand { float: left; } 的事情，但它失败了。我在底部发布代码，如果有人能提供帮助，我将不胜感激

html代码

https://pastebin.com/m9RrcQew

css代码

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 [data-theme="light"] {
     --background: #fff;
     --foreground: #f7fafc;
     --divider-color: rgba(227, 232, 238, 1);
     --accent-color: #1a1f36;
     --primary-color: #5469d4;
     --nav-hover-color: rgba(26, 31, 54, 0.15);
     --nav-focus-color: rgba(26, 31, 54, 0.25);
}
 [data-theme="dark"] {
     --background: #303030;
     --foreground: #424242;
     --divider-color: rgba(255, 255, 255, 0.2);
     --accent-color: #cecece;
     --primary-color: #fbc02d;
     --nav-hover-color: rgba(206, 206, 206, 0.15);
     --nav-focus-color: rgba(206, 206, 206, 0.25);
}
 :root {
     --sidebar-width: 270px;
     --gutter: 16px;
     --dividerY-width: 50px;
     --swatch-size: 32px;
     --elevation-z3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}
 * {
     box-sizing: border-box;
     -webkit-tap-highlight-color: transparent;
}
 html, body {
     height: 100%;
}
 body {
     margin: 0;
     color: var(--accent-color);
     font-family: 'Roboto', sans-serif;
}
 .icon-secondary {
     opacity: 0.5;
}
 input {
     display: none;
}
 .dashboard {
     display: grid;
     grid-auto-flow: column;
     grid-template-columns: var(--sidebar-width) 1fr;
}
 .container {
     height: 100%;
     display: grid;
     grid-auto-flow: column;
     align-items: center;
}
 .col {
     height: 100%;
     display: grid;
     grid-auto-flow: column;
     place-content: center;
     padding: var(--gutter);
     gap: var(--gutter);
     background: var(--background);
     transition: 0.25s ease-out;
}
 .sidebar {
     height: fit-content;
     width: var(--sidebar-width);
     border-radius: 4px;
     border: 1px solid var(--divider-color);
     overflow: hidden;
}
 .sidebar .account {
     background-color: var(--foreground);
     display: grid;
     grid-auto-flow: column;
     grid-template-columns: auto 1fr;
     align-items: center;
     gap: var(--gutter);
     color: var(--accent-color);
     padding: var(--gutter);
     border: 1px solid transparent;
}
 .sidebar .account .logo {
     width: 24px;
     display: flex;
}
 .sidebar .account .name {
     font-weight: bold;
     font-weight: 60;
     letter-spacing: 0.8px;
     text-transform: uppercase;
}
 .sidebar .nav {
     padding-top: calc(var(--gutter) * 2);
     background-color: var(--foreground);
     border: 1px solid transparent;
}
 .sidebar .nav ul {
     margin: 0;
     padding: 0 var(--gutter);
     list-style: none;
     display: grid;
     gap: calc(var(--gutter) / 8);
}
 .sidebar .nav ul:nth-last-child(1) {
     padding-bottom: var(--gutter);
}
 .sidebar .nav ul button {
     width: 100%;
     border: none;
     outline: none;
     background: none;
     text-align: left;
     display: grid;
     grid-auto-flow: column;
     grid-template-columns: auto 1fr;
     gap: var(--gutter);
     font-weight: 300;
     border-radius: 4px;
     padding: calc(var(--gutter) * 0.5);
     color: var(--accent-color);
     align-items: center;
     cursor: pointer;
     border: 1px solid transparent;
     transition: all 0.25s ease;
}
 .sidebar .nav ul button .icon {
     width: 16px;
     height: 16px;
     transition: all 0.125s ease;
}
 .sidebar .nav ul button .icon svg {
     width: 100%;
     height: 100%;
}
 .sidebar .nav ul button:hover:not(:disabled):not(.active) {
     background-color: var(--nav-hover-color);
}
 .sidebar .nav ul button.active {
     color: var(--primary-color);
}
 .sidebar .nav ul button.active:focus {
     border-color: var(--primary-color);
}
 .sidebar .nav ul button:disabled {
     cursor: initial;
     opacity: 0.6;
}
 .sidebar .nav .divider-x {
     box-shadow: 0px 1px var(--divider-color);
     height: 1px;
     margin: var(--gutter);
}

Answer 1

Dziendobry！您可以在 .col class.

中删除此属性 place-content: center;

 .col {
     height: 100%;
     display: grid;
     grid-auto-flow: column;
     place-content: center; /* <---- remove this line */
     padding: var(--gutter);
     gap: var(--gutter);
     background: var(--background);
     transition: 0.25s ease-out;
}

向左移动侧边栏

Move sidebar to the left

html

css

sidebar