Bootstrap 4: Volle Breite Inline Button

Question

Der Titel könnte irreführend sein, aber ich wusste nicht, wie ich es sonst nennen könnte. In jedem Fall muss ich ein Div/Bild inline mit einem Text und eine Schaltfläche unter diesem Text haben. Das Problem ist, ich kann nicht wirklich die Schaltfläche die volle Breite nehmen, ohne eine Auffüllung hinzuzufügen, egal was ich versuche.

Um meine Erklärung deutlicher zu machen, hier ein Bild von dem, was ich versuche zu machen:

Und ich versuche nur Bootstrap 4 Dienstprogramme zu verwenden. Dies ist mein Code so weit:

.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>

Wie kann ich diese Arbeit machen? Außerdem ist das div mit einer Klasse .img in gewisser Weise ein Platzhalter und muss so bleiben.

Vielen Dank!

Answer 1

Sie können so etwas wie dies versuchen, es dann entsprechend stylen:

<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> 

Answer 2

Hier ist der Code in dem Bild, für das Erhalten

'<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> 

Für Stil verwenden, um die Art in Frage

wie gezeigt

Answer 3

Sie könnten so etwas tun.

Beachten Sie, dass Bootstrap standardmäßig keine schwarze Hintergrundklasse hat, sodass Sie eine erstellen müssten.

.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>

Answer 4

.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>

Answer 5

Alles sieht einfach gut stellen Sie sicher, dass Sie, dass seine Arbeits bootstrap.css Datei in richtigen Ort und stellen Sie sicher, haben.

Ich habe einige Änderungen an Ihrem Code vorgenommen, ein bisschen hart codiert, aber Sie müssen darauf achten, Bootstrap-Klassen zu überschreiben und nicht direkt zu ändern.

.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>