Bootstrap 4：全寬Inline按鈕

標題可能會引起誤解，但我不知道如何命名它。在任何情況下，我需要有一個內嵌有文本的div /圖像和該文本下方的按鈕。問題是，無論我嘗試什麼，我都無法真正讓按鈕佔用全部寬度，而無需添加任何填充。Bootstrap 4：全寬Inline按鈕

爲了使我的解釋更清晰，這裏有我想要做的圖像：

我試圖只用引導4工具。這是我到目前爲止的代碼：

.col-md-3 { 
 
    background-color: #ededed; 
 
} 
 
.img { 
 
    width: 188px; 
 
    height: 88px; 
 
    background-color: #292a2c; 
 
} 
 
.btn { 
 
    background-color: #292a2c; 
 
    color: #ededed; 
 
}

<div class="col-md-3 d-flex p-0"> 
 
    <div class="img"></div> 
 
    <div> 
 
     <h6 class="m-auto">Text goes here</h6> 
 
     <button class="btn rounded-0 btn-block">Button</button> 
 
    </div> 
 
</div>

我怎樣才能使這項工作？此外，具有.img類的div在某種方式上是佔位符，並且需要保持這種狀態。

謝謝！

來源

2017-04-18 Retros

當你說「我想只能用引導4個公用事業」，你的意思是你不希望引起不與自舉類的任何風格的變化？ – amflare

是的。基本上。只有Bootstrap 4課程允許我做什麼。 – Retros

你可以嘗試這樣的事情，然後相應地設置樣式：

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-4"> 
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ79Qe630Fli9-SIDz188GQURmrRfhh6AksMKexPP5JvsE7AJ6t01mf5A"> 
    </div> 
    <div class="col-8"> 
     <div class="row"> 
     <p>text</p> 
     </div> 
     <div class="row"> 
     <button>button</button> 
     </div> 
    </div> 
    </div> 
</div>

來源

2017-04-18 16:02:59

這裏是獲取代碼，如下圖所示

'<div class="col-md-12"><div class="row"><div class="col-md-3"><div class="row"><div class="img"></div></div></div> 
<div class="col-md-6"><div class="row"> 
<h6 class="m-auto">Text goes here</h6><button class="btn rounded-0 btn-block">Button</button></div></div></div>

在風格使用的樣式在你的問題

來源

2017-04-18 16:29:26

你可以做這樣的事情。

請注意，默認情況下Bootstrap沒有黑色背景類，因此您必須創建一個。

.bg-black { 
 
    background-color: #000 !important; 
 
    border: 2px solid #000 !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="container-fluid">  <!-- Make it full width --> 
 
    <div class="row d-flex">   <!-- display flex --> 
 
    <div class="col-4 align-self-stretch">  <!-- stretch the column --> 
 
     <img class="w-100" src="http://placehold.it/200x200" /> 
 
    </div> 
 
    <div class="col-8 align-self-stretch">  <!-- stretch the column --> 
 
     <p>Some Text Here.<br/> Can be long or short</p> 
 
     <p>Yet another paragraph</p> 
 
     <p>And one more paragraph</p> 
 
     <button class="btn btn-primary bg-black btn-block rounded-0">Btn Txt</button> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

來源

2017-04-18 18:28:01 RBCunhaDesign

.col-md-3 { 
 
     background-color: #ededed; 
 
     width:100% !important; 
 
     
 
    } 
 
    
 
    .col-md-3> div{ 
 
    display:inline-block; 
 
    float:left; 
 
    width: 60%; 
 
    height:100%; 
 
    } 
 
    .img { 
 
     width: 15% !important;; 
 
     height: 88px !important; 
 
     background-color: #292a2c; 
 
     display:inline-block; 
 
    } 
 
    
 
    .btn { 
 
     width: 60%; 
 
     background-color: #292a2c; 
 
     color: #ededed; 
 
     height:50%; 
 
     display:inline-block; 
 
    }

<div class="col-md-3 d-flex p-0"> 
 
    <div class="img"></div> 
 
    <div> 
 
     <h6 class="m-auto">Text goes here</h6> 
 
     <button class="btn rounded-0 btn-block">Button</button> 
 
    </div> 
 
</div>

來源

2017-04-18 18:46:33

一切看起來都不錯只是確保你在正確的地方bootstrap.css文件，並確保其工作。

我對代碼做了一些修改，它有點硬編碼，但是你必須小心地覆蓋引導類，不要直接修改它們。

.box { 
 
    background-color: #ededed; 
 
} 
 
.img { 
 
    width: 188px; 
 
    height: 88px; 
 
    background-color: #292a2c; 
 
    float: left; 
 
    margin-right: 5px; 
 
} 
 
.text { 
 
    float: left; 
 
} 
 
.btn { 
 
    background-color: #292a2c; 
 
    color: #ededed; 
 
    margin-top: 33px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-md-6 d-flex p-0"> 
 
    <div class="box"> 
 
    <div class="img"></div> 
 
    <div class="text"> 
 
     <h6 class="m-auto">Text goes here</h6> 
 
     <button class="btn rounded-0 btn-block">Button</button> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-05-04 18:08:25 LXhelili

Bootstrap 4：全寬Inline按鈕

回答

相關問題