Question

我可以使用flex和grid在普通CSS中进行此布局，但是我需要知道如何使用bootstrap 4进行此布局。

public String testData(String rollNum) {

    String res;
    String selectQuery = "SELECT * FROM tablename where rollNumColumnName = '" +rollNum+ "' ";

    SQLiteDatabase db = this.getWritableDatabase();
    Cursor cursor = db.rawQuery(selectQuery, null);

    // looping through all rows and adding to list
    if (cursor.moveToFirst()) {
        do {

            String name = cursor.getString(nameColumnIndex);
            String address = cursor.getString(addressColumnIndex);

            res = "{\"isAvail\":true, \"name\":"+name+", \"address\":"+address+"}";

        } while (cursor.moveToNext());
    } else {
        res = "{\"isAvail\":false}";
    }
    cursor.close();
    db.close();

    return res;
}

这就是我需要得到的

Answer 1

布局为三列，中间列为2行。试试这个：

<div class="row">
  <div class="col-sm bg-success" style="height:500px">d</div>
  <div class="col-sm">
    <div class="row">
      <div class="col-sm-12 bg-primary" style="height:250px">d</div>        
    </div>        
    <div class="row">
      <div class="col-sm-12 bg-info" style="height:250px">z</div>
    </div>
  </div>
  <div class="col-sm bg-info" style="height:500px">d</div>
</div>

Answer 2

尝试此代码，希望对您有所帮助。

  <div class="row">
    <div class="col-md-3" style="height:100px; background-color:black">d</div>
    <div class="col-md-6 ">

            <div class="col-auto p-2 bg-primary" style="height:100px;">a</div>
            <div class="box mx-auto bg-info" style="height:100px;">b</div>

    </div>
    <div class="col-md-3 bg-info" style="height:100px">z</div>

    </div>

我将一行分为3列，两个侧边框的大小为3，中间框的大小为6，然后选中 col-auto-p2 和 box mx类-自动。

Answer 3

请尝试使用Bootstrap 4

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <div class="bg-success" style="height:500px">

            </div>
        </div>

        <div class="col-md-6">
            <div class="row h-100">
                <div class="col-12 h-50" style="padding-bottom: 10%;">
                    <div class="bg-info h-100">

                    </div>
                </div>

                <div class="col-12 h-50" style="padding-top: 10%;">
                    <div class="bg-info h-100">

                    </div>
                </div>
            </div>        
        </div>

        <div class="col-md-3">
            <div class="bg-success" style="height:500px">

            </div>
        </div>
    </div>
</div>

您可以在内部列上更改padding。如此处所述，请不要忘记将row放在container或container-fluid中 https://getbootstrap.com/docs/4.2/layout/grid/

容器提供了一种使您的网站内容居中和水平填充的方法。对于响应的像素宽度，请使用.container；对于宽度，请使用.container-fluid：在所有视口和设备尺寸中均为100％。

Answer 4

请检查工作片段是否对您有帮助

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


<div class="row">
<div class="col-sm-4 bg-success" style="height:500px">d</div>
<div class="col-sm-4" style="height:500px">
    <div class="row" style="position:relative;height:500px;">
        <div class="col-sm-12 bg-primary" style="height:200px">d</div>
        <div class="col-sm-12 bg-warning" style="height:200px;position:absolute; bottom:0;">d</div>
    </div>
</div>        
<div class="col-sm-4 bg-info" style="height:500px">z</div>

</div>

Booststrap 4 Grid System，我无法实现此布局

4 个答案: