blocks|key|146180|text|这应该能起到作用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|146181|<div+class="container">
++++<div+class="row">
++++++++<div+class="col-xs-6">
++++++++++++ONE
++++++++</div>
++++++++<div+class="col-xs-6">
++++++++++++TWO
++++++++</div>
++++</div>
</div>|code-block|syntax|javascript|146182|请阅读Bootstrap文档的网格系统部分，以熟悉Bootstrap的网格的工作原理：|146183|http://getbootstrap.com/css/#grid|offset|length|146184|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|X|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

<p>This should do the trick:</p>

<pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-xs-6"&gt;
            ONE
        &lt;/div&gt;
        &lt;div class="col-xs-6"&gt;
            TWO
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Have a read of the grid system section of the Bootstrap docs to familiarise yourself with how Bootstrap's grids work:</p>

<p><a href="http://getbootstrap.com/css/#grid">http://getbootstrap.com/css/#grid</a></p>


blocks|key|4652872|text|使用引导程序类col-xx-#和col-xx-offset-#|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4652873|这里发生的是你的屏幕被分成了12列。在col-xx-#中，#是您覆盖的列数，offset是您留下的列数。|4652874|对于xx来说，在一般的网站上，md是首选的，如果你想让你的布局在移动设备上看起来一样，xs是首选。|4652875|我能做的就是满足你的要求|4652876|<div+class="row">
++<div+class="col-md-4">First+Div</div>
++<div+class="col-md-8">Second+DIV+</div>
</div>|code-block|syntax|javascript|4652877|应该能行得通。|4652878|entityMap^0|7|8|G|F|0|J|8|T|1|0|2|2|F|2|17|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1B|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1C|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|1D|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|T|$]]

<p>Use the bootstrap classes <code>col-xx-#</code> and <code>col-xx-offset-#</code></p>

<p>So what is happening here is your screen is getting divided into 12 columns. In <code>col-xx-#</code>, <code>#</code> is the number of columns you cover and offset is the number of columns you leave. </p>

<p>For <code>xx</code>, in a general website, <code>md</code> is preferred and if you want your layout to look the same in a mobile device, <code>xs</code> is preferred.</p>

<p>With what I can make of your requirement,</p>

<pre><code>&lt;div class="row"&gt;
  &lt;div class="col-md-4"&gt;First Div&lt;/div&gt;
  &lt;div class="col-md-8"&gt;Second DIV &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Should do the trick.</p>


blocks|key|146281|text|要水平对齐两个div，只需组合两个Bootstrap类:如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|146282|<div+class+="container-fluid">
++<div+class+="row">
++++<div+class+="col-md-6+col-sm-6">
++++++++First+Div
++++</div>
++++<div+class+="col-md-6+col-sm-6">
++++++++Second+Div
+++++</div>
++</div>
</div>|code-block|syntax|javascript|146283|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>To align two divs horizontally you just have to combine two classes of Bootstrap:
Here's how:</p>

<pre><code>&lt;div class ="container-fluid"&gt;
  &lt;div class ="row"&gt;
    &lt;div class ="col-md-6 col-sm-6"&gt;
        First Div
    &lt;/div&gt;
    &lt;div class ="col-md-6 col-sm-6"&gt;
        Second Div
     &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|4652914|text|<div+class="container">
++++<div+class="row">
+++++++<div+class="col-xs-6+col-sm-6+col-md-6">
++++++++++First+Div
+++++++</div>
+++++++<div+class="col-xs-6+col-sm-6+col-md-6">
++++++++++Second+Div
+++++++</div>
+++</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4652915|​|unstyled|4652916|这就是问题所在。|4652917|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
       &lt;div class="col-xs-6 col-sm-6 col-md-6"&gt;
          First Div
       &lt;/div&gt;
       &lt;div class="col-xs-6 col-sm-6 col-md-6"&gt;
          Second Div
       &lt;/div&gt;
   &lt;/div&gt;
</code></pre>

<p></p>

<p>This does the trick.</p>


blocks|key|4652939|text|Ranveer提供的响应(上面的第二个答案)绝对不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4652940|他说要使用col-xx-offset-#，但偏移量不是这样使用的。|offset|length|style|CODE|4652941|如果您浪费时间尝试使用col-xx-offset-#，就像我根据他的回答所做的那样，那么解决方案就是使用offset-xx-#。|4652942|entityMap^0|0|5|F|0|B|F|1G|B|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@$D|Q|E|R|F|G]|$D|S|E|T|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|K|$]]

<p>The response provided by Ranveer (second answer above) absolutely does NOT work. </p>

<p>He says to use <code>col-xx-offset-#</code>, but that is not how offsets are used. </p>

<p>If you wasted your time trying to use <code>col-xx-offset-#</code>, as I did based on his answer, the solution is to use <code>offset-xx-#</code>.</p>


blocks|key|146339|text|我用Angular编程的另一种方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|146340|++++<div+class="form-row">
++++++++<div+class="form-group+col-md-7">
+++++++++++++Left
++++++++</div>
++++++++<div+class="form-group+col-md-5">
+++++++++++++Right
++++++++</div>
++++</div>|code-block|syntax|javascript|146341|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Alternative which I did programming Angular: </p>

<pre><code>    &lt;div class="form-row"&gt;
        &lt;div class="form-group col-md-7"&gt;
             Left
        &lt;/div&gt;
        &lt;div class="form-group col-md-5"&gt;
             Right
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>


blocks|key|146380|text|如果你真正想要的是更结构化的数据，比如一个有多行的并排表格，我推荐使用css网格而不是bootstrap，因为你不需要为每个孩子都添加类名：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|146381|//+css-grid:+https://www.w3schools.com/css/tryit.asp?filename=trycss_grid
//+https://css-tricks.com/snippets/css/complete-guide-grid/
.grid-container+{
++display:+grid;
++grid-template-columns:+auto+auto;+//+20vw+40vw+for+me+because+I+have+dt+and+dd
++padding:+10px;
++text-align:+left;
++justify-content:+center;
++align-items:+center;
}

.grid-container+>+div+{
++padding:+20px;
}


<div+class="grid-container">
++<div>1</div>
++<div>2</div>
++<div>3</div>
++<div>4</div>
++<div>5</div>
++<div>6</div>
++<div>7</div>
++<div>8</div>
</div>|code-block|syntax|javascript|146382|css-grid|offset|length|146383|entityMap|0|LINK|mutability|MUTABLE|url|https://stackblitz.com/edit/github-erwo1k?file=src%252Fapp%252Fapp.component.html^0|0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>I recommend css grid over bootstrap if what you really want, is to have more structured data, e.g. a side by side table with multiple rows, because you don't have to add class name for every child:</p>

<pre><code>// css-grid: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid
// https://css-tricks.com/snippets/css/complete-guide-grid/
.grid-container {
  display: grid;
  grid-template-columns: auto auto; // 20vw 40vw for me because I have dt and dd
  padding: 10px;
  text-align: left;
  justify-content: center;
  align-items: center;
}

.grid-container &gt; div {
  padding: 20px;
}


&lt;div class="grid-container"&gt;
  &lt;div&gt;1&lt;/div&gt;
  &lt;div&gt;2&lt;/div&gt;
  &lt;div&gt;3&lt;/div&gt;
  &lt;div&gt;4&lt;/div&gt;
  &lt;div&gt;5&lt;/div&gt;
  &lt;div&gt;6&lt;/div&gt;
  &lt;div&gt;7&lt;/div&gt;
  &lt;div&gt;8&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><a href="https://stackblitz.com/edit/github-erwo1k?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">css-grid</a></p>


blocks|key|4653007|text|Make+sure+you+wrap+your+"row"+inside+the+class+"container"+.+Also+add+reference+to+bootstrap+in+your+html.
Something+like+this+should+work:
<html+lang="en">
<head>
<meta+name="viewport"+content="width=device-width,+initial-scale=1.0">
<link+rel="stylesheet"+href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"+integrity="sha384-ggOyR0iXCbMQv3Xipma34MD%2BdH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"+crossorigin="anonymous">
</head>
+<body>
+++++<p>lets+learn!</p>
++<div+class="container">
++++++++++<div+class="row">
++++++++++++++<div+class="col-lg-6"+style="background-color:+red;">
++++++++++++++++++ONE
++++++++++++++</div>
++++++++++++++<div+class="col-lg-2"+style="background-color:+blue;">
++++++++++++++++++TWO
++++++++++++++</div>
++++++++++++++<div+class="col-lg-4"+style="background-color:+green;">
++++++++++++++THREE
+++++++++++</div>
++++++++++</div>
++++++</div>
+</body>
+</html>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4653008|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>Make sure you wrap your &quot;row&quot; inside the class &quot;container&quot; . Also add reference to bootstrap in your html.
Something like this should work:
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;/head&gt;
 &lt;body&gt;
     &lt;p&gt;lets learn!&lt;/p&gt;
  &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-lg-6&quot; style=&quot;background-color: red;&quot;&gt;
                  ONE
              &lt;/div&gt;
              &lt;div class=&quot;col-lg-2&quot; style=&quot;background-color: blue;&quot;&gt;
                  TWO
              &lt;/div&gt;
              &lt;div class=&quot;col-lg-4&quot; style=&quot;background-color: green;&quot;&gt;
              THREE
           &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;
</code></pre>


blocks|key|146411|text|任何人去Bootstrap+5(测试版的日期)，这是我的工作。在我的例子中，我必须将卡片标题部分中的两个项目并排对齐：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|146412|<div+class="card+small-card+text-white+bg-secondary">
++++<div+class="d-flex+justify-content-between+card-header">
++++++++<div+class="col-md-6+col-sm-6">
++++++++++++<h4>100%2B+Components</h4>
++++++++</div>
++++++++<div+class="ml-auto">
++++++++
++++++++++++<i+class="data-feather+hoverzoom"+data-feather="grid"></i>
++++++++</div>
++++</div>
++++<div+class="card-body">
++++++++<p>Lorem+ipsum+dolor+sit+amet,+adipscing+elitr,+sed+diam
++++++++++++nonumy+eirmod+tempor+ividunt+labor+dolore+magna.</p>
++++</div>
</div>|code-block|syntax|javascript|146413|这里的陷阱是justify-content-between和ml-auto。你可以在官方链接上获得更多信息here。和一个实时工作示例here。|offset|length|style|CODE|146414|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/5.0/utilities/flex/#align-items|1|https://github.com/ajkr195/Avni/blob/main/index.html^0|0|0|6|N|U|7|1H|4|0|1V|4|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]|$I|11|J|12|K|L]]|9|@$I|13|J|14|1|15]|$I|16|J|17|1|18]]|A|$]]|$1|M|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>Anyone going for Bootstrap 5 (beta as on date), here is what worked for me. In my case, I had to align two items in the card's header section side-by-side:</p>
<pre><code>&lt;div class=&quot;card small-card text-white bg-secondary&quot;&gt;
    &lt;div class=&quot;d-flex justify-content-between card-header&quot;&gt;
        &lt;div class=&quot;col-md-6 col-sm-6&quot;&gt;
            &lt;h4&gt;100+ Components&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class=&quot;ml-auto&quot;&gt;
        &lt;!--&lt;div class=&quot;col-md-6 col-sm-6 ml-auto&quot;&gt; --&gt;
            &lt;i class=&quot;data-feather hoverzoom&quot; data-feather=&quot;grid&quot;&gt;&lt;/i&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;card-body&quot;&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, adipscing elitr, sed diam
            nonumy eirmod tempor ividunt labor dolore magna.&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>The catch here is <code>justify-content-between</code> and <code>ml-auto</code>. You can get more info <a href="https://getbootstrap.com/docs/5.0/utilities/flex/#align-items" rel="nofollow noreferrer">here</a> at the official link. And a live working example <a href="https://github.com/ajkr195/Avni/blob/main/index.html" rel="nofollow noreferrer">here</a>.</p>


blocks|key|146430|text|在Bootstrap+4%2B中，col-xs-6并不存在。请改用col-6|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|146431|<div+class="container">
++++<div+class="row">
++++++++<div+class="col-6">
++++++++++++ONE
++++++++</div>
++++++++<div+class="col-6">
++++++++++++TWO
++++++++</div>
++++</div>
</div>|code-block|syntax|javascript|146432|entityMap^0|F|8|V|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>In Bootstrap 4+, <code>col-xs-6</code> doesn't exist. Instead use <code>col-6</code>:</p>
<pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-6&quot;&gt;
            ONE
        &lt;/div&gt;
        &lt;div class=&quot;col-6&quot;&gt;
            TWO
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


<p>Please refer below code what i tried</p>

<pre><code>&lt;div class="row"&gt;
  &lt;div class="center-block"&gt;First Div&lt;/div&gt;
  &lt;div class="center-block"&gt;Second DIV &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>output :</p>

<pre><code>First Div
SecondDiv
</code></pre>

<p>Expected output :</p>

<pre><code>                      First Div        Second Div
</code></pre>

<p>i want to align the two divs horizontally  center to page using bootstrap css. how can i do this ? i dont want to use simple css and floating concept to do this. because i need to make use of the bootstrap css to work in all kind of layouts (i.e. all window size and resolutions ) instead of using media query.</p>


Align two divs horizontally side by side center to the page using bootstrap css

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

请参考下面我尝试过的代码<div class="row">  <div class="center-block">First Div</div>  <div class="center-block">Second DIV </div></div>输出：First DivSecondDiv预期输出：           ...

问使用bootstrap css将两个div水平并排居中对齐到页面
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用bootstrap css将两个div水平并排居中对齐到页面EN