Question

我想要的是这个。如果只有1 div，则宽度应为100％。当我添加div时，两个div必须为50％并且彼此相邻。这是否可以使用bootstrap，col-md-6和col-md-12类？

Answer 1

您需要在客户端添加相关的服务器类或使用javascript。使用相同的html / css是不可能的。

您的案例所需的html来源是：

第一的

<div class="row">
    <div class="col-md-12">Your content</div>
</div>

第二

<div class="row">
    <div class="col-md-6">Your content</div>
    <div class="col-md-6">Your content</div>
</div>

Answer 2

以下示例是按源顺序排序的，即，HTML源中的第1列出现在第2列之前。列是显示在左侧还是右侧由CSS控制：

固定右

const functions = require('firebase-functions');

// The Firebase Admin SDK to access the Firebase Realtime Database.
const admin = require('firebase-admin');
admin.initializeApp();

const MAIN_FEED_TYPE = "MAIN";
const SAVED_FEED_TYPE = "SAVED";
const ARCHIVED_FEED_TYPE = "ARCHIVED";
const SAVE_USER_ACTION = "SAVE";
const ARCHIVE_USER_ACTION = "ARCHIVE";
const SAVED_PATH = "saved"
const ARCHIVED_PATH = "archived"

exports.updateQualityScore = functions.https.onCall((data, context) => {
    const environment = data.environment
    const feedType = data.feedType
    const action = data.action
    const contentTitle = data.contentTitle
    const uid = context.auth.uid;

    var feedTypePath
    if (feedType === SAVED_FEED_TYPE) {
        feedTypePath = SAVED_PATH
    } else if (feedType === ARCHIVED_FEED_TYPE) {
        feedTypePath = ARCHIVED_PATH
    }

    admin.firestore().ref('qa/content/feeds/main/content/'+contentTitle)
        .get().then(function(doc) {
            console.log('Trigger fired on content: ' 
                +  contentTitle +  " | user: " + uid
                + " | action: " + action + ' | feedType: ' + feedType);
            if (doc.exists) {
                console.log("Document data:", doc.data());
            } else {
                console.log("No such document!");
            }
            return {
                status: 'Get content success.'
             }
        }).catch(function(error) {
            console.log("Error getting document:", error);
            return {
                status: 'Get content error.'
            }
        });
});

#wrapper {
  margin-right: 200px;
}
#content {
  float: left;
  width: 100%;
  background-color: #CCF;
}
#sidebar {
  float: right;
  width: 200px;
  margin-right: -200px;
  background-color: #FFA;
}
#cleared {
  clear: both;
}

固定左

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

#wrapper {
  margin-left: 200px;
}
#content {
  float: right;
  width: 100%;
  background-color: #CCF;
}
#sidebar {
  float: left;
  width: 200px;
  margin-left: -200px;
  background-color: #FFA;
}
#cleared {
  clear: both;
}

Bootstrap max 2 col div彼此相邻

2 个答案: