Question

如何将3列彼此相邻？

<div class="mydiv">
    <div class="row">
        <div class="col-md-18">
            <div class="col-sm-6">
                <div class="textdiv">Text1</div>
            </div>
            <div class="col-sm-6">
                <div class="textdiv">Text2</div>
            </div>
             <div class="col-sm-6">
               <div class="textdiv">Text3</div>
            </div>
        </div>
    </div>


.row {
    width:100%;
    margin:0px auto;
    border:1px solid black;
    height:75px;
    background-color:#f2f2f2;
}
col-sm-6 {

    margin:0px auto;
    text-align:center;
}
div.textdiv {
    border:1px solid #9a9a9a;

    padding:5px;
    color:black;
    font: bold 16px arila;
    width:40%;
    float:left;
    text-align:center;
    margin-left:10px;
    margin-top:25px;
    margin-right:3px;
}
div.col-sm-6 a {
    border:1px solid #9a9a9a;
    margin:0px auto;
    background-color:Aqua;
    color:black;
    text-decoration:none;
    font: bold 16px arila;
    width:40%;
    padding:5px;
    margin-left:3px;
    margin-right:10px;
    margin-top:25px;
    float:right;
    text-align:center;
}

Answer 1

从bootstrap中获取，使用

    <div class="row">
      <div class="col-md-12">
         <div class="col-md-4">Test1</div>
         <div class="col-md-4">Test2</div>
         <div class="col-md-4">Test3</div>
      <div>
    </div>

http://getbootstrap.com/css/#grid

Answer 2

文本div宽度应小于33％。

width:30%;

将其添加到txtdiv。

http://jsfiddle.net/QPKVX/372/

Answer 3

将40％变为30％从

div.textdiv {
    border:1px solid #9a9a9a;

    padding:5px;
    color:black;
    font: bold 16px arila;
    width:40%;
    float:left;
    text-align:center;
    margin-left:10px;
    margin-top:25px;
    margin-right:3px;
}

到

div.textdiv {
    border:1px solid #9a9a9a;
    padding:5px;
    color:black;
    font: bold 16px arila;
    width:30%;
    float:left;
    text-align:center;
    margin-left:10px;
    margin-top:25px;
    margin-right:3px;
}

Answer 4

Bootstrap只有12列

请参阅docs

此外，要正确应用引导程序，您必须将row括在container内。

要使用bootstrap对其进行3列校对，请按以下步骤重写HTML

<div class="mydiv">
    <div class="row">
      <div class="col-md-12">
        <div class="col-md-4">
            <div class="textdiv">Text1</div>
        </div>
        <div class="col-md-4">
            <div class="textdiv">Text2</div>
        </div>
         <div class="col-md-4">
           <div class="textdiv">Text3</div>
        </div>
    </div>
</div>

<强>更新

为了对齐同一行中的3列，您必须使用类col-md-4，因为它将12列布局拆分为3个相等的列。

注意班级名称中的md。它指定您的目标是中宽设备。在您的代码中，您指定的sm适用于小宽度设备。

如何将三列彼此相邻

4 个答案: