时间戳

首页 > 解决方案 > 引导列未在行内对齐

html - 引导列未在行内对齐

问题描述

我的引导代码编写为将所有列堆叠在所有屏幕大小上，除了大屏幕。在大屏幕上，我打算将列横向拆分为一行。我相信我正确地编写了 col-lg-x 标签，它们确实相应地调整了列的大小，但它们仍然垂直堆叠。我需要它们在大屏幕上水平对齐。

<body class="container-fluid">
   <div class='row'>
        <div class='col-lg-2 sec' style="align-items: flex-start;">
            <form>
                <select class="cat">
                    <option> EV </option>
                    <option> Tech </option>
                    <option> Pharma </option>
                    <option> Cannabis </option>
                    <option> Solar </option>
                    <option> Auto </option>
                    <option> Socials</option>
                    <option> Crypto </option>
                </select>
                <select class='amount'>
                    <option> 5 </option>
                    <option> 10 </option>
                    <option> 20 </option>
                    <option> 25 </option>
                </select>
                <input type="submit" class="Apply"></div>
            </form>
        </div>
        <div class='col-lg-6 sec'>
            <div class='col' style=" font-weight: bold; color:#D8E1EB">
                Symbol
                <div class='col syms'>
                </div>
            </div>
            <div class='col' style=" font-weight: bold; color: greenyellow">
                High
                <div class='col highs'>
                </div>
            </div>
            <div class='col' style=" font-weight: bold; color: red">
                Low
                <div class='col lows'>
                </div>
            </div>
            <div class='col' style=" font-weight: bold; color:#D8E1EB">
                Open
                <div class='col opens'>
                </div>
            </div>
            <div class='col' style=" font-weight: bold; color:#DE772C">
                % Change
                <div class='col percs'>
                </div>
            </div>
        </div>
        <div class='col-lg-4 sec'>
            <div class='col' style=" font-weight: bold; color: greenyellow">
                High
            </div>
            <div class='col' style=" font-weight: bold; color: red">
                Low
            </div>
            <div class='col' style=" font-weight: bold; color:#D8E1EB">
                close
            </div>
            <div class='col' style=" font-weight: bold; color:#DE772C">
                % Change
            </div>
        </div>
    </div>
</body>

标签： htmlcssbootstrap-4

解决方案

我稍微改变了你的代码。检查整页状态

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
   <div class='row'>
        <div class='col-lg-2 sec' style="align-items: flex-start;">
            <form>
                <select class="cat">
                    <option> EV </option>
                    <option> Tech </option>
                    <option> Pharma </option>
                    <option> Cannabis </option>
                    <option> Solar </option>
                    <option> Auto </option>
                    <option> Socials</option>
                    <option> Crypto </option>
                </select>
                <select class='amount'>
                    <option> 5 </option>
                    <option> 10 </option>
                    <option> 20 </option>
                    <option> 25 </option>
                </select>
                <input type="submit" class="Apply"></div>
            </form>
        </div>
        <div class='sec row'>
            <div class='col col-sm-2 col-md-2 col-lg-2 col-xl-2' style=" font-weight: bold; color:#D8E1EB">
                Symbol
                <div class='col syms'>
                </div>
            </div>
            <div class='col col-sm-2 col-md-2 col-lg-2 col-xl-2' style=" font-weight: bold; color: greenyellow">
                High
                <div class='col highs'>
                </div>
            </div>
            <div class='col col-sm-2 col-md-2 col-lg-2 col-xl-2' style=" font-weight: bold; color: red">
                Low
                <div class='col lows'>
                </div>
            </div>
            <div class='col col-sm-2 col-md-2 col-lg-2 col-xl-2' style=" font-weight: bold; color:#D8E1EB">
                Open
                <div class='col opens'>
                </div>
            </div>
            <div class='col col-sm-2 col-md-2 col-lg-2 col-xl-2' style=" font-weight: bold; color:#DE772C">
                % Change
                <div class='col percs'>
                </div>
            </div>
        </div>
        <div class='sec row'>
            <div class='col col-sm-2 col-md-2 col-lg-2 col-xl-2' style=" font-weight: bold; color:#D8E1EB">
                Symbol
                <div class='col syms'>
                </div>
            </div>
            <div class='col col-sm-2 col-md-2 col-lg-2 col-xl-2' style=" font-weight: bold; color: greenyellow">
                High
            </div>
            <div class='col col-sm-2 col-md-2 col-lg-2 col-xl-2' style=" font-weight: bold; color: red">
                Low
            </div>
            <div class='col col-sm-2 col-md-2 col-lg-2 col-xl-2' style=" font-weight: bold; color:#D8E1EB">
                close
            </div>
            <div class='col col-sm-2 col-md-2 col-lg-2 col-xl-2' style=" font-weight: bold; color:#DE772C">
                % Change
            </div>
        </div>
    </div>
</body>

   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

推荐阅读