列占据全宽

列占据全宽

关注
发信
关注(28)粉丝(399)

Bootstrap 4 Alpha 6 列占据全宽

本文介绍了Bootstrap 4 Alpha 6 列占据全宽的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我刚刚将我的一个电子应用程序升级到 Bootstrap 用于 Bootstrap 4 的新 Alpha 6.他们对网格系统和 flexbox 进行了大量调整，这反过来又给我的电子应用程序带来了一些奇怪的错误.目前我有一个侧边栏和一个主要区域.

并且侧边栏占据了整个屏幕的宽度，即使我将其定义为 .col-4 .col-xl-3，

它正在把所有东西都推到下面.如何防止这种行为发生?

更多代码，上一问题已修复，但通过@haxxtron 的回答，现在左侧没有填充.

 
<div class = "房间容器 pl-3 col-4 col-xl-3"><div class="room mt-2 col-offset-1"><h4 class = "text-muted">房间:</h4><h5 class = '显示房间名称'></h5><h4 class = "text-muted">聊天次数:</h4><h5 class = 'display chat-c​​ount'></h5><h4 class = "text-muted">用户名:</h4><h5 class = '显示用户名'></h5>
<p class = "lead footer" id="me">{ } with <img class = "heart" src="../js/img/heart.svg">作者:<a href="http://siwiec.us">Adam Siwiec</a></h3>

<div class="right-status-container col-8 col-xl-9"><div id="头像"></div><div id="状态容器"><h4 class = "pl-1 pt-1">状态:</h4><div类=pl-1"id=状态">

解决方案

.row 的，补偿应用于列的装订线.来自 文档

行是水平组的列，可确保您的列正确排列.我们在 .row 上使用负边距方法来确保您的所有内容在左侧正确对齐.

尝试以下操作:

JSFIDDLE

HTML

<div class="col-4 col-xl-3 no-gutter">剩下
<div class="col-8 col-xl-9">对

I just upgraded one of my electron apps to Bootstrap's new Alpha 6 for Bootstrap 4. They made lots of adjustments to the grid system and flexbox and in turn that has given me some wonky bugs in my electron app.Currently I have a sidebar and a main area.

and the sidebar is taking up the whole width of the screen, even though I have it defined as .col-4 .col-xl-3,

And it is shoving everything to the right of it down below. How can I prevent this behavior from happening?

Edit: More code, the previous issue is fixed but with @haxxtron's answer, there is now no padding on the left hand side.

    <div class ="row">
    <div class = "room-container pl-3 col-4 col-xl-3">
    <div class="room mt-2 col-offset-1">
        <h4 class = "text-muted">Room: </h4>
        <h5 class = 'display room-name'></h5>
        <h4 class = "text-muted">Chat Count: </h4>
        <h5 class = 'display chat-count'></h5>
        <h4 class = "text-muted">Username: </h4>
        <h5 class = 'display username'></h5>
    </div>
    <p class = "lead footer" id="me"> { } with <img class = "heart" src="../js/img/heart.svg"> by <a href="http://siwiec.us">Adam Siwiec</a></h3>
</div>

<div  class="right-status-container col-8 col-xl-9">
    <div id="avatar"></div>
    <div id="status-container">
        <h4 class = "pl-1 pt-1">Status: </h4>
        <div class = "pl-1" id = "status">
        </div>
    </div>
</div>
</div>
解决方案

.row's, compensate for the guttering that gets applied to columns. From Docs

Try the following:

JSFIDDLE

HTML

<div class="row">
    <div class="col-4 col-xl-3 no-gutter">
    LEFT
    </div>
    <div class="col-8 col-xl-9">
     RIGHT
    </div>
</div>

这篇关于Bootstrap 4 Alpha 6 列占据全宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-31 01:06
Powered by LMLPHP ©2024 列占据全宽 0.051468