Bootstrap 3 Grid系统,如果缺少第二列,则使第一列为全宽

时间:2018-03-26 07:42:21

标签: php html css twitter-bootstrap

假设在下面的代码中$someThingIsTrue为假。 容器行是否有任何类或属性如果缺少第二列,则第一列宽度设置为100%

请注意我正在寻找只有Bootstrap解决方案(因为我也理解我可以编写相同的if语句,并在需要时为第一列设置col-lg-12)

    <div class="row">
        <div class="col-lg-6">Some content here</div>

        <?php if($someThingIsTrue): ?>
           <div class="col-lg-6">Other content here</div>
        <?php endif; ?>
    </div>

2 个答案:

答案 0 :(得分:2)

如果你想在PHP中使用它,请试试这个:

using System;
using System.Runtime.InteropServices;
using UnityEngine;

public class Test : MonoBehaviour
{
    [DllImport("ImageInputInterface")]
    private static extern void GetRawImageBytes(IntPtr data, int width, int height);

    private Texture2D tex;
    private Color32[] pixel32;

    private GCHandle pixelHandle;
    private IntPtr pixelPtr;

    void Start()
    {
        InitTexture();
        gameObject.GetComponent<Renderer>().material.mainTexture = tex;
    }


    void Update()
    {
        MatToTexture2D();
    }


    void InitTexture()
    {
        tex = new Texture2D(512, 512, TextureFormat.ARGB32, false);
        pixel32 = tex.GetPixels32();
        //Pin pixel32 array
        pixelHandle = GCHandle.Alloc(pixel32, GCHandleType.Pinned);
        //Get the pinned address
        pixelPtr = pixelHandle.AddrOfPinnedObject();
    }

    void MatToTexture2D()
    {
        //Convert Mat to Texture2D
        GetRawImageBytes(pixelPtr, tex.width, tex.height);
        //Update the Texture2D with array updated in C++
        tex.SetPixels32(pixel32);
        tex.Apply();
    }

    void OnApplicationQuit()
    {
        //Free handle
        pixelHandle.Free();
    }
}

如果您使用bootstrap 4 you can use flexbox,则需要在每个项目上加<div class="row"> <div class="col-lg-<?= ($someThingIsTrue ? '6' : '12') ?>">Some content here</div> <?php if ($someThingIsTrue): ?> <div class="col-lg-6">Other content here</div> <?php endif; ?> </div>

width:100%

以下是一个示例(视图摘要):

<div class="d-flex">
  <div class="p-2">Other content here</div>
  <?php if ($someThingIsTrue): ?>
  <div class="p-2">Some Other content here</div>
  <?php endif; ?>
</div>
.box {
  width:100%;
}

.box-blue {
  background:blue;
}

.box-red {
  background:red;
}

.box-green {
  background:green;
}

答案 1 :(得分:0)

您可以在php变量$class中设置类,如下所示:

<div class="row">
        <?php
            if($someThingIsTrue)
               $class= 'col-lg-6';
            else
               $class = 'col-lg-12';
           endif; 
        ?>
        <div class="<?php echo $class;">Some content here</div>

        <?php if($someThingIsTrue): ?>
           <div class="col-gl-6">Other content here</div>
        <?php endif; ?>
    </div>